如何在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

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

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

您应该检查您的托管商是否支持 HTTP2。这应该会提高速度。

但是，如果您想在路由中禁用自动代码拆分，则必须编辑配置。

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

如何在nuxt js中制作包含所有页面的压缩js文件

how to make a compressed js files with all pages in nuxt js

vue.js

nuxt.js