# DLL (了解)
## 认识DLL
1. DLL全称动态链接库（Dynamic Link Library），是为软件在windows中实现共享函数库的一种实现方式
2. webpack中也有内置的DLL的功能，它指的是我们可以将可以共享、并且不经常改变的代码，抽取成一个共享的库
3. 这个库在之后编译的过程中，会被引入到其他项目中的代码中
## 使用DLL
1. 打包一个DLL库
2. 项目中引入DLL库
注意：在升级webpack4之后，React和Vue脚手架移除了DLL库
# Terser js代码压缩
## 介绍
1. Terser是一个JavaScript的解释（Parser）、Mangler（绞肉机）/Compressor（压缩机）的工具集，类似于post-css、babel。
2. 早期都是用uglify-js来压缩、丑化代码，但现在已经不再维护，并且它不支持ES6+语法
## 命令行使用
1. 安装
`npm install terser -D`
2. 在命令行运行
`npx terser ./src/index.js -o ./src/index.min.js`
-o 为输出文件
更多选项：http://github.com/terser/terser
## webpack中使用
### 介绍
1. 在webpack中有个minimizer属性，在production模式下，默认就是使用TerserPlugin来处理代码
2. 如果我们对默认的配置不满意，可以自己创建TerserPlugin的实例，并且覆盖相关配置
```
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
mode: 'production',
optimization: {
// 开启TerserPlugin配置
minimize: true,
minimizer: [
// TerserPlugin无需安装，webpack默认安装
new TerserPlugin({
// 设置并发数，提高编译速度
parallel: true, // true是默认值，是 os.cpus.length-1
extractComments: false, // 是否将注释单独抽离到一个文件内
terserOptions: {
// 以下是对转换的详细配置，见官网
mangle: true,
toplevel: true,
keep_classnames: true,
keep_fnames: true
}
})
]
}
}
```
# css-minimizer-webpack-plugin CSS代码压缩
1. 安装
`npm install css-minimizer-webpack-plugin -D`
2. webpack中配置：
```
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
mode: 'production', // 可以在任意地方，用 process.env.NODE_ENV 获取
plugins: [
new CssMinimizerPlugin()
]
}
```
# Scope Hoisting 作用于提升
## 介绍
1. Scope Hoisting从wbepack3开始新增的一个功能，能对作用域进行提升，并且让webpack打包后的代码更小，运行更快
2. 默认情况下webpack打包会有很多的函数作用域，包括一些IIFE，无论从最开始的代码运行，还是加载一个模块，都需要执行一系列的函数，Scope Hoisting可以将函数合并到一个模块中来运行
## 使用
```
const webpack = require('webpack')
module.exports = {
mode: 'production',
plugins: [
// Scope Hoisting插件调用
new webpack.optimize.ModuleConcatenationPlugin()
]
}
```