代码之家 › 专栏 › 技术社区 › Hkm Sadek

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

nuxt.js vue.js

0

Hkm Sadek · 技术社区 · 7 年前

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

目前它像这样加载

1 回复 | 直到 7 年前

1

3

Jakub Juszczak 6 年前

好吧,代码拆分页面会让页面更快。因为每个路由只加载它需要的文件。

所以如果你把所有的页面都放在一个包里,速度会更慢。因为你需要在初始加载时加载所有内容。

你应该检查一下你的主人是否支持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