webpack4.29.x成神之路（十七） 代码分割(code spliting)下

目录

上节： 代码分割(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其它属性

先看下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,
      }
     }
   }

下节：懒加载