【Nuxt】05 Nuxt2项目打包优化

1 打包优化

在nuxt.config.js配置

build: {
    // 开启打包分析
    analyze: true,
}

进行打包可以查看包体积：

element引入优化：

• 在插件按需引入：

• 打包分包 npm i babel-plugin-component -D，在我自己的项目里，打包后的elementUI资源可以降低至原先的30%
  • 配置

module.exports={
  build: {
      transpile: [/^element-ui/],
      babel: {
        plugins: [
          [
            'component',
            {
              libraryName: 'element-ui',
              styleLibraryName: 'theme-chalk'
            }
          ]
        ]
      },
    ...
  }
}

压缩

正好安装compression-webpack-plugin来对js文件进行压缩。

• 安装: npm install compression-webpack-plugin
• 在nuxt.config.js中：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports={
  build: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false // 是否删除原文件
      })
    ],
  }
}

这样打包出来的大小虽然没变，但是点击.nuxt-dist-client中你会发现gz打包后，较原来的文件减少了3/4的体积。

nuxt-precompress：主要是压缩我们的js/html/css文件

配置好之后build一下，果然在.nuxt/dist/client里生成了压缩文件。

• 安装: nuxt-precompress
• 在nuxt.config.js中：

nuxtPrecompress: {
    enabled: true, // Enable in production
    report: false, // set true to turn one console messages during module init
    test: /\.(js|css|html|txt|xml|svg)$/, // files to compress on build
    middleware: {
      enabled: true,
      enabledStatic: true,
      encodingsPriority: ['br', 'gzip']
    },
    gzip: {
      enabled: true,
      filename: '[path].gz[query]', // middleware will look for this filename
      threshold: 10240,
      minRatio: 0.8,
      compressionOptions: { level: 9 }
    },
    brotli: {
      enabled: true,
      filename: '[path].br[query]', // middleware will look for this filename
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8
    }
  },

chunk分包

splitChunks: 設定 Chunks 的最大和最小 size。
在nuxt.config.js中加入：

module.exports={
  build: {
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000
      }
    },
  }
}

公共业务模块提取

module.exports={
  build: {
    optimization: { // 拆分大文件
      splitChunks: {
        cacheGroups: {
          default: {
            name: 'chunk-commons',
            chunks: 'initial',
            minChunks: 3, // 模块被引用3次以上的才抽离
            priority: -20
          }
          ...
        }
      }
    },
}