webpack 代码分离优化快速指北

分离代码文件

在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry 定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 chunkFilename 的配置

所以很多时候分离代码文件就是将不同的 chunk 分离开来，生产环境中有利于浏览器缓存，加快二次访问的速度

代码分离的时候，optimization 中配置的 splitChunks 默认就是 async，默认对异步代码进行分离；所以通常情况下能用异步的用异步 import；配合 prefetching 和 preloading 能够产生很好的效果

filename 和 chunkFilename 的区别

output: { filename: '[name].js', chunkFilename: '[name].chunk.js'}

举个例子

如果入口文件是 main.js

那么打包后生成的文件是 main.js

如果 main.js 中引入了其他模块，比如引入了 lodash 那么可能会生成一个名为 lodash.chunk.js 文件

基本概念了解了，接下来开始对 js 和 css 文件进行分离的操作：

js 代码分离

js 代码的分离操作，首先要考虑的就是对异步代码的分离。这里使用 dynamicImport

dynamicImport

可以使用 magic comment 来修改动态 import 导出的 chunkname，语法规则如下：

import('/* webpackChunkName: "lodash" */' 'lodash').then(//...)

如果需要使用这种注释的写法，应该安装模块 @babel/plugin-syntax-dynamic-import，并在 babelrc 中引入这个插件，使用方法很简单这里不多说了

splitChunks

splitChunk 的相关配置参数

建议将公共使用的第三方类库显式地配置为公共的部分，而不是 webpack 自己去判断处理

缓存组中还有其他几个参数：

webpack4——SplitChunksPlugin使用指南

module.exports = { entry: { vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方类库 }, optimization: { splitChunks: {  cacheGroups: {  vendor: {   chunks: "initial",   test: "vendor",   name: "vendor", // 使用 vendor 入口作为公共部分   enforce: true,  },  }, }, }, // ... 其他配置}