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

很好的代码分割页面应该使您的页面更快。因为每个路由仅加载其所需的文件。

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

您应该检查托管人是否支持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文件

1 个答案: