webpack429x成神之路十七-代码分割code-spliting下

jiezi

6 年前

上节：代码分割 (code spliting) 中

上节目录如下：

前两节代码分割只用到了 splitChunks 中的 chunks 属性，现在来看下其它属性

先来打个包，npm run build：

可以看到 lodash 打包后的名字是 vendors~lodash，这其实跟 src/index.js 中的一段注释有关：

现在删掉这段注释再打包：

就默认用 [id] 命名了，这就是魔法注释的作用，还有其它魔法注释如：
/ webpackPrefetch: true / 这段表示改模块开启 Prefetch 预加载 <link rel=”prefetch” href=”verdor~main.js”>
/ webpackPreload: true / 这段表示改模块开启 Preload 预加载 <link rel=”preload” href=”verdor~main.js”>

虽然魔法注释能影响输出的文件名，但却不能完全控制，比如我就想让输出的文件名叫 lodash 呢？
先恢复魔法注释，然后修改 webpack/webpack.prod.js:

// 省略
optimization: {
    // 配置代码分割
    splitChunks: {
      cacheGroups: {
        vendors: false,
        default: false
      } 
    }
  }
// 省略

再打包：

这样就没有 vendor~ 前缀了。

先看下 splitChunks 的默认属性：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

属性很多，官网传送

这里注释一下这些默认属性的意思：

splitChunks: { // 代码分隔配置
       /*
       * 选择要进行分割的包
       * 可选值：all（推荐）, async(默认，只分隔异步代码), and initial(只分割同步代码)
       * 还可以传入函数精确控制
       * chunks (chunk) {
            // exclude `my-excluded-chunk`
            return chunk.name !== 'my-excluded-chunk';
          }
       * */
       chunks: 'all',

       // 默认，大于 30k 的包才做代码分割
       minSize: 30000,

       // 默认，分割出来的每个包最大 size，// 比如设为 50000（50kb），那如果某个包分离出来后超过 50kb，就会进行再分割，保证每个文件都不超过 50kb
       maxSize: 0,

       // 默认，至少被引入一次就进行代码分隔
       minChunks: 1,

       // 默认，浏览器最多并行请求 5 个 js 文件, 也就是说，分割数量超过 5 个时，就会停止代码分割了
       maxAsyncRequests: 5,

       // 默认，对于入口文件最多只分割 3 个 js 包，超过 3 个就停止
       maxInitialRequests: 3,

       // 默认，文件名连接符
       automaticNameDelimiter: '~',

       // 默认，分割后的文件名将根据 chunks 和 cacheGroups 自动生成名称。name: true,

       cacheGroups: {
        vendors: {  // vendors 是组名

          // 默认，只对 node_modules 里的代码进行分隔
          test: /[\\/]node_modules[\\/]/,

          /*
            默认，每个组都会有个优先级，如果某个包满足多个组的 test 规则，就按优先级来判断归哪个组
            数值越大，优先级越高
          */
          priority: -10,

          // 分割后的文件名（默认是：组名~ 入口名.js，即 verdors~main.js）filename: 'vendors.js',

          // 强制分隔，无视 minChunks、maxAsyncRequests 等选项，默认 false
          enforce: true
        }
      },


      default: {  // default 是组名, 分隔不在 node_modules 里的代码
        minChunks: 2,   // 默认
        priority: -20,    // 默认

        /*
          复用已存在的 chunk,
          比如 index.js 里引入 axios 和 test.js
          test 里也引入了 axios，那么 axios 就会被复用
        */
        reuseExistingChunk: true
      },

      /*
      * 将项目所有 css 打包到一个文件中
      * 还可以分入口打包：https://webpack.js.org/plugins/mini-css-extract-plugin
      * */
      styles: {
        name: 'styles',
        test: /\.less$/,
        chunks: 'all',
        enforce: true,
      }
     }
   }

下节：懒加载

webpack429x成神之路十七-代码分割code-spliting下

魔法注释

修改输出文件名

splitChunks 其它属性