code-splitting分割代码块(抽离第三方库代码与公共代码)

module、chunk、bundle的意义

module: 项目开发中的各个模块 chunk: 代码块【通过import()动态引入的代码、通过splitChunks拆分出来的代码都可以看作chunk】 bundle: webpack打包后的文件

splitChunks - 分割公共的代码块

配置optimization中的splitChunks

// 默认配置：
optimization: {
    splitChunks: {
      chunks: 'async', // 默认只分割异步引入代码块,可配置为  all
       // ......此处省略一些
      cacheGroups: { // splitChunks就是根据cacheGroups去拆分模块的
        vendors: {
         // 表示只筛选从node_modules文件夹下引入的模块，所以node_modules下的第三方模块才会被拆分出来。
          test: /[\\/]node_modules[\\/]/,
          priority: -10 // 权重设置
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }

不要弄混tree-shaking与code-splitting

tree-shaking 只是在引入变量的时候只对引入的变量做打包，关注的是import解构赋值方式的引入方式。 tree-shaking笔记

code-splitting 是将符合规则的文件单独进行打包进一个文件。【异步引入自动分割，同步引入需要非node_modules库代码则需要配置】

code-splitting笔记