什么是DLL
DLL全程是动态链接库（Dynamic Link Library），是为软件在Windows中实现共享函数库的一种实现方式。webpack中也有内置DLL的功能，它指的是我们可以将可以共享，并且不经常改变的代码，抽取成一个共享的库。这个库在之后编译的过程中，会被引入到其他项目的代码中。这是一个编译好的库，引入之后不需要再次编译。如果不用 DDL,引入的包都是需要编译的，所以 DDL 就是一些包编译好的文件。
DDL库的使用
- 打包一个DLL库
webpack 内置了一个 DllPlugin 可以打包一个DLL的库文件 - 使用打包的DLL库
如果我们在我们的代码中使用了react、react-dom，我们有配置 splitChunks 的情况下，他们会进行分包，打包到一个独立的chunk中，但是现在我们有了dll_react，不再需要单独去打包它们，可以直接去引用 dll_react 即可。第一步：通过DllReferencePlugin插件告知要使用的DLL库，第二步：通过AddAssetHtmlPlugin插件，将我们打包的DLL库引入到Html模块中。
什么是Terser
Terser 可以压缩、丑化代码，让 bundle 变得更小。Terser是一个独立的工具，所以可以单独安装。
# 全局安装
npm install terser -g
# 局部安装
npm install terser
命令行使用Terser
terser [input files] [options]
# 举例说明
terser js/file1.js -o foo.min.js -c -m
代码压缩文档
代码丑化文档
Compress 和 Mangle 的 options
Compress option：
- arrows：class或者object中的函数，转换成箭头函数；
- arguments：将函数中使用 arguments[index]转成对应的形参名称；
- dead_code：移除不可达的代码（tree shaking）；
Mangle option
- toplevel：默认值是false，顶层作用域中的变量名称，进行丑化（转换）；
- keep_classnames：默认值是false，是否保持依赖的类名称；
- keep_fnames：默认值是false，是否保持原来的函数名称；
//命令行中执行 Terser
npx terser ./src/abc.js -o abc.min.js -c arrows,arguments=true,dead_code -m toplevel=true,keep_classnames=true,keep_fnames=true
Terser在webpack中配置
webpack中有一个minimizer属性，在production模式下，默认就是使用TerserPlugin来处理代码
- 打开minimize，让其对我们的代码进行压缩（默认production模式下已经打开了）
- 在minimizer创建一个TerserPlugin：
- extractComments：默认值为true，表示会将注释抽取到一个单独的文件中； 在开发中，我们不希望保留这个注释时，可以设置为false；
- parallel：使用多进程并发运行提高构建的速度，默认值是true，并发运行的默认数量： os.cpus().length - 1，我们也可以设置自己的个数，但是使用默认值即可。
- terserOptions：设置 terser 相关的配置，compress：设置压缩相关的选项，mangle：设置丑化相关的选项，可以直接设置为true，toplevel：底层变量是否进行转换，keep_classnames：保留类的名称，keep_fnames：保留函数的名称。
CSS的压缩
CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等，CSS的压缩我们可以使用另外一个插件：css-minimizer-webpack-plugin
- 安装
npm install css-minimizer-webpack-plugin -D
- 在 optimization.minimizer 中配置
