webpack4.splitChunks

webpack中的三个概念module、chunk和bundle

在研究splitChunks之前，我们必须先弄明白这三个名词是什么意思，主要是chunk的含义，要不然你就不知道splitChunks是在什么的基础上进行拆分。

　　从官网上貌似没找太多的解释，去网上搜了搜基本上都在转述这位老哥的回答《what are module,chunk and bundle in webpack》，我根据自己的理解给出我个人的看法：

module：就是js的模块化webpack支持commonJS、ES6等模块化规范，简单来说就是你通过import语句引入的代码。
chunk: chunk是webpack根据功能拆分出来的，包含三种情况：

　　　　1、你的项目入口（entry）

　　　　2、通过import()动态引入的代码

　　　　3、通过splitChunks拆分出来的代码

　　　　chunk包含着module，可能是一对多也可能是一对一。

bundle：bundle是webpack打包之后的各个文件，一般就是和chunk是一对一的关系，bundle就是对chunk进行编译压缩打包等处理之后的产出。

splitChunks

　　下面进入正题讲解splitChunks，splitChunks就算你什么配置都不做它也是生效的，源于webpack有一个默认配置，这也符合webpack4的开箱即用的特性，它的默认配置如下：

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："initial" 表示只从入口模块进行拆分，我认为就是entry的配置

"async"异步，相当于import异步拆分打包的内容

"all": 所有

priority：优先级，数值越大，越先执行

minChunks: 引用次数大于这个值进行打包

打包优化思路，

　　a.先把大的库单独打包，如代码编辑器ace,图标可视化echarts,这边我通过test设置为函数，把一些编辑器相关的也一同打包

　　b.把一些不怎么会改,升级的基础库进行打包，libs配置

　　c.把一些公共代码进行打包。async的配置。需要注意minChunks: 2，这个配置就是上面打包完成剩下的文件中，如果有超过2个地方引用的就会打包进async.js,这个配置minChunks到底填几就看实际场景了

d.vendors和default是默认配置，下面就是相关的配置，vendors是把node_modules打包一起，default是把重复代码打包，自己配置很详细的情况下，就应该禁用掉

optimization.splitChunks({
                chunks: 'async',
                cacheGroups: {
                     libs: {
                         name: 'chunk-libs',
                         test: /[\/]node_modules[\/]/,
                         priority: 10,
                        chunks: 'initial' // only package third parties that are initially dependent
                     },
                    echarts: {
                        name: 'chunk-echarts', // split echarts into a single package
                        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\/]node_modules[\/]_?echarts(.*)/ // in order to adapt to cnpm
                    },
｝

建议安装： webpack-bundle-analyzer

1、引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

2、使用

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))

1、每次构建时自动打开

构建完成之后，浏览器会自动打开localhost:8888,不用改动package.json

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'server',
    generateStatsFile: true,
    statsOptions: { source: false }
}))

配置参数记得补上，不然构建完不会自动打开～

2、运行特定命令才打开

（1）把analyzerMode设置为disabled

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
    generateStatsFile: true,
    statsOptions: { source: false }
}))

（2）在package.json的scripts字段中加入

"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json"

其中stat.json文件的位置在打包后的文件夹中，通常是dist，具体情况根据实际情况来定。

（3）命令行中键入命令
npm run bundle-report

参考：https://www.cnblogs.com/kwzm/p/10314438.html