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

2

目录

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

上节目录如下:

clipboard.png

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

魔法注释

先来打个包,npm run build:

clipboard.png

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

clipboard.png

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

clipboard.png

就默认用[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
      } 
    }
  }
// 省略

再打包:

clipboard.png
这样就没有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,
      }
     }
   }

下节:懒加载


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...