webpack4 - splitChunks & runtimeChunk

公共代码提取 ,webpack4弃用CommonsChunkPlugin,内置 optimization

---

作用

提取被重复引入的文件，单独生成一个或多个文件，这样避免在多入口重复打包文件

配置项

splitChunks

• chunks 值为async（默认）,all（推荐），initial

    // 入口
    import "./a.js"  //同步加载
    import ('./b.js') //异步加载
  
    // b.js
    import vue from "vue" //
  

  • async：
    分割异步打包的代码，打包出b和vue两个chunk
    

    

    image.png

  • all
    分割异步同步代码（需要定义新规则，将同步的代码打包）

    splitChunks: {
      chunks: 'all',
      cacheGroups: {
          a : {
              name: 'a',
              chunks: 'all',
          }
      }
    }
  

  

  image.png
  • initial
    同时打包异步同步，但是异步内部的引入将不再考虑，直接打包一起，会将vue和b的内容打在一起
    
    

    image.png

• cacheGroups 自定义配置决定生成的文件,缓存策略
  • test ： 限制范围，正则匹配文件夹或文件
  • name : 打包的chunks的名字
  • priority : 优先级，多个分组冲突时决定把代码放在哪块
  • enforce: 强制生成
• minSize 生成新的chunk的最小体积，默认30000B
• minChunks 被entry引入的次数，默认1（为1时，适合分离node_modules里的第三方库）
• maxInitialRequest entry文件最大的并行请求数（请求过多，耗时），默认5
• maxAsyncRequests 按需加载的时候最大的并行请求数，默认3
• automaticNameDelimiter 定义文件名称连接符，默认~

需要注意的地方

• cacheGroups会继承和覆盖splitChunks的配置项，但是test、priorty和reuseExistingChunk只能用于配置缓存组
• cacheGroups里的每项最好都要加上chunks参数，不然可能打包不出想要的东西
• minSize默认是30KB（这个体积是压缩前的）在小于30kb的情况下一定要设置一个值，否则也有可能打包不出想要的东西，而且该配置项要配置在cacheGroups
• 默认的提取公共模块机制 vendors和default 可能会产生意外的结果，尽量取消默认后的再自定义（在多页面应用中，假设某个页面的css文件重写了样式，就有可能使这个重写流流入公共样式中，在另一个页面被引用而导致布局出错）default:false , vendors: false

runtimeChunk

runtimeChunk ，作用是将包含chunks映射关系的list单独从app.js里提取出来，因为每一个chunk的id基本都是基于内容hash出来的，所以你每次改动都会影响它，如果不把它提取出来的话，等于app.js每次都会改变，缓存就失效了。
在使用 CommonsChunkPlugin的时候，我们也通常把webpack runtime 的基础函数提取出来，单独作为一个chunk,毕竟code splitting想把不变的代码单独抽离出来，方便浏览器缓存，提升加载速度。
其实就是单独分离出webpack的一些运行文件。

参考
https://www.jb51.net/article/151976.htm