一、减少代码体积：Tree Shaking
Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。
注意：它依赖 ES Module。
如何设置
Webpack5已经默认开启了这个功能，无需其他配置。
二、减少代码体积：Babel
Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。
你可以将这些辅助代码作为一个独立模块，来避免重复引入。
@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
如何设置
1、下载包
npm i @babel/plugin-transform-runtime -D
2、配置
将plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积 这段加入到babel-loader的属性中。如下所示：
{
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
},
}
生产环境与开发环境配置的方法是一样的方式。
三、减少图片压缩体积：Image Minimizer
开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。
我们可以对图片进行压缩，减少图片体积。
注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。
如何设置
1、下载包
npm i image-minimizer-webpack-plugin imagemin -D
还有剩下包需要下载，有两种模式：
无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
有损压缩
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
2、配置
我们以无损压缩配置为例：
（1）首先引入插件：
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
（2）引入插件内容
// 压缩图片
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
[
"svgo",
{
plugins: [
"preset-default",
"prefixIds",
{
name: "sortAttrs",
params: {
xmlnsOrder: "alphabetical",
},
},
],
},
],
],
},
},
}),
3、打包时会出现报错
我们需要安装两个文件到 node_modules 中才能解决
- jpegtran.exe
需要复制到 node_modules\jpegtran-bin\vendor 下面
- optipng.exe
需要复制到 node_modules\optipng-bin\vendor 下面
