Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js 如何使用nuxt js中的所有页面制作压缩js文件_Vue.js_Nuxt.js - Fatal编程技术网

Vue.js 如何使用nuxt js中的所有页面制作压缩js文件

Vue.js 如何使用nuxt js中的所有页面制作压缩js文件,vue.js,nuxt.js,Vue.js,Nuxt.js,我正在运行一个用adonuxt构建的nuxt js应用程序。这个应用程序运行得很好。但是我看到所有的页面都在一个接一个地加载,使得网站在初始加载时有点慢。在没有加载所有js区块之前,站点的交互性无法工作 那么,我如何用所有页面创建一个js文件呢。 另外,我不想加载网站中的管理页面。我怎样才能把这个分开呢 我的nuxt配置如下 'use strict' const resolve = require('path').resolve module.exports = {

我正在运行一个用adonuxt构建的nuxt js应用程序。这个应用程序运行得很好。但是我看到所有的页面都在一个接一个地加载,使得网站在初始加载时有点慢。在没有加载所有js区块之前,站点的交互性无法工作

那么,我如何用所有页面创建一个js文件呢。 另外,我不想加载网站中的管理页面。我怎样才能把这个分开呢

我的nuxt配置如下

    'use strict'

    const resolve = require('path').resolve


    module.exports = {
    /*
    ** Headers of the page
    */
    env: {
        baseUrl: 'https://savingfamilybazar.com/'
    },

    build: {
        vendor:[ 'vue-product-zoomer'] 
    },
    modules: [
        '@nuxtjs/axios',

    ],
    axios: {

    },
    plugins: [
        '~plugins/vuetify',
        '~plugins/element',
        {src: '~plugins/zoom', ssr: false}
    ],

    head: {
        title: 'my site',
        meta: [
        {
            charset: 'utf-8'
        },
        {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1.0'
        },
        {
            hid: 'description',
            name: 'description',
            content: 'site.....'
        },

        ],
        link: [
        {
            rel: 'icon',
            type: 'image/x-icon',
            href: '/favicon.ico',
        },
        ],
        script: [
            { src: 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js' },
            { src: 'https://unpkg.com/@adonisjs/websocket-client' },
        ],
    },
    /*
    ** Global CSS
    */
    css: [

        //'~assets/css/main.css',


    ],
    /*
    ** Customize the progress-bar color
    */
    loading: { color: '#ffd451',height:'3px' },
    /*
    ** Point to resources
    */
    srcDir: resolve(__dirname, '..', 'resources')
    }
目前它的加载方式如下


嗯,代码拆分页面应该会使页面更快。因为每个路由只加载它需要的文件

因此,如果您将所有页面放在一个包中,那么速度会更慢。因为您需要在初始加载时加载所有内容

您应该检查您的主机是否支持HTTP2。这将提高速度

但是,如果要禁用路由中的自动代码拆分,则必须编辑配置

build: {
    optimization: {
      splitChunks: {
        chunks: 'async',
      }
    },
    splitChunks: {
      pages: false,
      vendor: false,
      commons: false,
      runtime: false,
      layouts: false
    },
}