webpack中的optimization怎么配置
更新时间：2023-09-11
在前端工程化中，运用webpack进行项目构建很是常见，而webpack的优化工具optimization是其中很重要的一部分，可以对构建过程进行优化。本文将介绍如何使用webpack的optimization配置，下面将分成四个部分来进行介绍。
### 第一部分：无entry/output下的配置
如果我们的webpack配置中没有设置entry和output，那么我们可以使用全局模式来进行配置。
```javascript
const webpack = require('webpack');
module.exports = {
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 50000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
priority: 10 //优先级
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
```
上述代码中，我们对splitChunks进行了配置。splitChunks会在构建时根据定义的块自动将公共代码分离出来。对于vendor这个缓存组，我们定义了测试目录、名字、在所有async chunks中都使用、并且priority为10。vendor默认的块，就是node_modules中的代码文件。对于default这个缓存组，我们定义了最少重复使用次数，而且使用现有的块。这里的priority是一个负值，因为缓存组还有其他缓存组，这就是优先级的应用。
```javascript
splitChunks: {
chunks: 'all', //所有chunk
minSize: 30000, //最小尺寸
maxSize: 50000, //想服务于这样尺寸的chunk
minChunks: 1, //最少被几个chunk引用
maxAsyncRequests: 5, //最大异步请求数
maxInitialRequests: 3, //入口页的最大请求数
automaticNameDelimiter: '~', //自动名称定界符
automaticNameMaxLength: 30, //自动命名最大长度
cacheGroups: {} //很重要的缓存组
}
```
### 第二部分：entry/output下的配置
如果我们的webpack配置设置了entry和output，那么我们需要使用的是splitChunks的initial,async,all的vendors配置。同时，我们还需要指定哪一个chunk需要被重新构建，所有的chunk都需要么，还是只有.vendors应该被重新构建？下面是一个例子：
```javascript
const webpack = require('webpack');
module.exports = {
entry: {
app: './app.js',
vendor: ['library-a', 'library-b', 'library-c'],
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].bundle.js',
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: 'vendors',
enforce: true,
},
},
},
},
};
```
上述代码中，我们通过test属性来指定我们的vendors缓存组应该缓存哪些模块，同时给出了打包后的文件名，并且使用了enforce:true来确保这个缓存组就是我们打包出来的chunks。
### 第三部分：移除未使用的css
我们可以使用Purify CSS Plugin将未使用的 css 去除，从而缩小 js 文件的大小。一个例子如下：
```javascript
const PurifyCSSPlugin = require('purifycss-webpack');
module.exports = {
// ...
plugins: [new PurifyCSSPlugin()],
};
```
上述代码中我们使用了purifycss-webpack这个插件来移除未使用的 CSS。它会纵观整个代码库中使用的所有html和javascript的组件，然后找到其中所有的 CSS class。一旦找到，它就会在每个 class 和 SASS/LESS 文件之间创建一个映射，以便在最终打包时，Purify CSS Plugin才能找到未使用的 CSS class 并将其去除。
### 第四部分：使用Tree Shaking
Tree Shaking可以移除那些没有被引用的模块（包括 function、class 等），这对构建出来的bundle文件大小有很大帮助。在webpack 4中，我们可以通过mode来开启这个功能。在package.json中的代码如下：
```javascript
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
```
上述代码中我们通过设置为`--mode production`来开启Tree Shaking的功能。在生产环境所构建出来的包将会是精简版，只放入你实际使用到的代码文件。
通过上述四个部分我介绍了如何使用webpack中的optimization进行优化工作。其中主要是对代码分离、模块去重以及 Tree Shaking。我们可以根据当前的项目实际情况进行适当的配置来达到优化的效果。
