理解webpack4.splitChunks之chunks

  上回说到按照默认的splitChunks配置,入口里面的第三方依赖没有打包出来,这个是因为chunks属性的原因,下面我们就介绍chunks属性的意义和用法。

chunks的含义是拆分模块的范围,它有三个值async、initial和all。

  • async表示只从异步加载得模块(动态加载import())里面进行拆分
  • initial表示只从入口模块进行拆分
  • all表示以上两者都包括

我们回顾下上一篇文章里面我们说的webpack splitChunks默认配置:

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

我们发现chunks的默认配置是async,也就是只从动态加载得模块里面进行拆分,怪不得能够把page1引入的第三方模块拆分出来,但是因为entry1.js属于入口chunk所以它引入的第三方库react-dom就没能拆分出来。

  现在让我们来将chunks设置为all看看能否修复这个问题,下图就是chunks设置all拆分出来的代码:

  

这回我们发现入口模块的第三方依赖已经被成功拆分出来了(第一个),接下来让我来考考你,如果我将chunks设置为initial,打包的结果会是什么呢?

上面就是chunks设置为initial的结果,不知道你猜对了吗,也就是将page1.js这个动态加载的模块所引入的第三方模块去掉了,没有拆分出来,因为initial只会对入口模块进行拆分。

posted on 2019-01-24 15:38  渴望做梦  阅读(4497)  评论(0编辑  收藏

导航