webpack中Code Splitting(代码分割)

Code Splitting概念

Code Splitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包成一个bundle可能体积很大，导致无法利用浏览器并行下载的能力，且白屏时间长，也会导致下载很多可能用不到的代码，每次上线用户都得下载全部代码，Code Splitting能够将代码分割，实现按需加载或并行加载多个bundle，可利用并发下载能力，减少首次访问白屏时间，可以只上线必要的文件。

Code Splitting的作用?

webapck自动代码分割

optimization: {
        splitChunks: {
            chunks: 'all',
        }
    }

参考文章：https://www.jianshu.com/p/9fc5bd6ac238

webpack代码分割底层使用了splitChunksPlugin插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 类库是从node_modules中引入的话就进行代码分割
            priority: -10,
            filename: 'vendor.js', // 重命名分割文件
          },
          //其余使用defaule参数
          default: false
        }
    }}

splitChunksPlugin插件配置：

魔法注释：将异步打包的文件命名为lodash

import(/* webpackChunkName:"lodash" */ 'lodash');

.babelrc文件配置
{
    presets: [
        [
            "@babel/preset-env", {
                targets: {
                    chrome: "67",
                },
                useBuiltIns: 'usage'
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

配置参考：https://www.webpackjs.com/plugins/split-chunks-plugin/

配置分析：

 optimization: {
    splitChunks: {
      chunks: 'async', // async 只对异步代码生效， all同步异步都生效， initial同步生效
      minSize: 30000, // 体积大于30KB的模块才会代码分割
      maxSize: 0, // 一般不需要，对大于一定体积的模块尝试进行再次分割
      minChunks: 1, // 当一个模块至少被引用了几次后才做代码分割
      maxAsyncRequests: 5, // 最多分割几个js文件，超出后后面的不会再进行分割
      maxInitialRequests: 3, // 入口文件引入的库最多能分割成几个包
      automaticNameDelimiter: '~', // 生成文件名字中间的连接符
      automaticNameMaxLength: 30,
      name: true, // 使cacheGroups中设置的文件名有效
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 从node_modules中引入的模块进行代码分割
          priority: -10 // 优先级，同时满足vendors和default，使用优先级高的
        },
        default: {
          // 没有设置test参数，所有的都符合
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true // 如果引入的模块已经被打包，复用，不再打包
          filename:'common.js'
        }
      }
    }
  }

小结，当js文件引入了模块后，webpack会分析，当前引入的文件是不是在node_module里面，如果在那么就执行cacgeGrounps的规则，如果不在就走defaule里面的规则