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

Question

我正在运行一个用 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')
    }

目前它像这样加载

Answer 1

Well, code splitting the pages should make your page faster. Because each route loads only the files it needs.

So if you have all the pages in one bundle it will be even slower. Because you need to load everything on the initial load.

You should check if your hoster supports HTTP2. This should boost the speed.

However, if you want to disable the automatic code-splitting in routes you have to edit the config.

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

https://nuxtjs.org/api/configuration-build#splitchunks

https://github.com/nuxt/nuxt.js/pull/3060