Vue项目性能优化、提取公共库（Common Chunks）

SplitChunksPlugin | webpack 中文文档

项目打包： npm run build
根目录下生成一个 dist 文件夹

• css：当前项目中所有打包后的样式文件
• js：当前项目中所有打包后的 js 文件
• app.js 所有 src 目录下内容打包后的结果
• app.js.map：上面文件的映射文件
• chunk.js：所有第三方包打包后的文件
• chunk.js.map：上面文件的映射文件
• index.html：项目的静态页面

chunk-vendors.js 顾名思义 chunk （块 / 包） - vendors （供应商），即为：不是自己写的模块包，也就是/node_modules项目目录的所有模块包，它们称为第三方模块或供应商模块 

一 . splitChunks

splitChunks配置是 Webpack 的一个特性，主要用于在生产环境（production）下的代码分割。它在构建应用时自动分析模块的共享情况，并将其分割成单独的 chunk，可以在需要时按需加载, 以便于复用和提高缓存利用率

官网推荐的默认行为(vue.config.js)

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

 我所在项目配置的 (除了elementUI, 包括vue, vuex ,vue-router等都可以配置代码分割, 基于我已使用cdn加速, Gzip压缩, 所以只配了elementUI来展示 )

Vue项目性能优化、开启Gzip

Vue项目性能优化、配置CDN加速

module.exports = {
  // ...
         //配置代码分割
        optimization: {
          splitChunks: {
            chunks: "all",// 可选值：all，async 和 initial。all功能最强大
            minSize: 20000, //最小包体积，这里的单位是byte，超过这个大小的包会被splitChunks优化
            minChunks: 1, 
            maxAsyncRequests: 30, //按需加载时的最大并行请求数
            maxInitialRequests: 30, // 最多首屏加载30个请求
            cacheGroups: {
              vendors: {
                //vendor是导入的 npm 包(第三方库) ,有人会命名为libs等类名
                name: "chunk-vendors",
                test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
                priority: -10,
              },
              elementUI: {
                name: "chunk-elementUI",
                priority: 20,
                test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                reuseExistingChunk: true, //是否缓存
                chunks: "async",
              },
              // 书写其他依赖包 ...

              // 备一个优先级最低的chunk-commons.js，用于处理其他公共组件
              commons: {
                // 公共模块包
                name: `chunk-commons`,
                minChunks: 2,
                priority: 0,
                reuseExistingChunk: true, //是否缓存
              },
            },
          },
        },
  // ...
};

二. 效果展示

splitChunks配置前

splitChunks配置后 

好处: 利用splitChunks代码分割( 分包 )将chunk-vendors 包拆分成多个chunk-xxxx.js文件, 比如chunk-elementUi.js, chunk-vue.js, chunk-vuex.js等等模块, 单独进行拆分以减少初始加载时间