webpack5 基础配置（性能优化）12 DLL Terser Scope Hoisting

认识DLL库（了解）

DLL全称是 动态链接库，是为软件在winodw种实现共享函数库的一种实现方式，而Webpack也内置了DLL的功能，为的就是可以共享，不经常改变的代码，抽成一个共享的库。这个库在之后的编译过程中，会被引入到其他项目的代码中。
比如，我们可以对react/react-dom进行单独编译成一个dll库，然后在接下来的要使用react的项目中直接引入这个库，因为react/react-dom已经编译过了的，所以不用再对react进行编译。vue等等也可以。

DLL使用分成两部

1 单独打包成一个dll库
2 项目中引入DLL库
在升级到webpack4，react和vue都移除了dll，为什么，因为webpack4已经提供了足够的性能，所以他们认为没有必要对dll这个库再去维护，花费时间。

如何打包DLL库

比如打包一个react的dll库

需要引用webpack内置的一个插件，DLLPlugin
执行npm run build就可以了
怎么使用？
把打包的包copy到需要的项目，然后在weback中进行配置。也是通过插件。
也是webpack的内置插件，dllReferencePlugin
然后打包

可以看到没有vendors文件了，没有第三方库，所以DLL库配置成功了。
但是打包后的js是没有react的代码的，所以会报错。所以我们打包后的react后的js文件，应该使用一个插件cnpm isntall add-seest-html-wepack-plugin

让dll这个包插入到html的模板中，然后把dll这个包复制到Build里面去。

现在就打包成功了。

认识Terser(优化工具)

独立的工具，不依赖于webpack，webpack使用需要借助插件。
terset是一个js的解释，绞肉机/压缩机的工具集。比如我们的大肉经过绞肉机后就变成一块一块的小肉。代码的解释就是，比如我们有个函数名字非常长，如果不做任何优化，转化后的代码也是比较大。所以需要terser工具来进行一个转化，使其打包后的文件变小。以前是称为丑化，现在是tersetr(绞肉机），还有个压缩机的解释是会解决掉dead_code,就是无意义的代码，比如if（false)console.log()。不可达的代码就是无意义的代码
terser就是可以对你的代码进行解析，然后丑化，最后压缩的一个工具集，可以让我们的bundle.js变得更小
早期是使用uglify-js，现在不在维护了，而且不支持es6。

Terser基本使用

cnpm install terser
这样安装其实也安装了他的cli工具。
npx terser ./src/abc.js -o abc.min.js
npx terser 输入的文件 -o 输入的文件 xxx后面可以跟参数


因为我们没有传参数，所以他只是把空格全都删掉了。
如果想把某些代码做特殊的处理，可以传额外的参数。

npx terser ./src/abc.js -o abc.min.js -c defaults
使用默认配置的话也是没有做多大转化。
但它会把类或者对象的函数转成箭头函数


-m丑化
npx terser ./src/abc.js -o abc.min.js -c defaults -m

可以看到已经做了形参的转化了。
更多的参数可以去官网看看。一般都是设置默认就行

terser在webpack的配置

在webpack有一个optimization.minimizer的属性(optimization是webpack用于优化的属性)，在Production模式下，默认就是使用TerserPlugin来处理代码的，所以我们每次Build之后代码都会被压缩。如果对默认的配置不满意，我们可以自己配置minimizer属性，覆盖默认的配置。
其实react默认Production的时候，不仅仅使用TerserPlugin，还有很多其他的插件一些做优化。

minimizer默认已经配置了TerserPlugin，并且webpack内部也已经内置了这个插件。

new TerserPlugin({})里面可以配置很多属性，如parallel: true，如果你电脑有多个内核，会多线程运行你的代码。extractComments：false，是否把注释单独抽离到一个包里面。默认是false。terserOptions: {} //可以配置自己想要的配置，里面也可以配置很多刚才terset的参数。
一般我们使用默认的配置就行。

小结，我们可以在webpack中引入TerserPlugin，这个在webpack5已经是内置了，所以在optimization.minimizer里面配置即可。他默认是对我们所有的js代码进行丑化，减小打包后bundle.js包的体积。提高性能。

CSS的优化

打包后的css也没有压缩。但是css的优化一般都是压缩空格，不会改变类名。一般使用
css-minimizer-webpack-plugin插件。
cnpm install css-minimizer-webpack-plugin -D
也是在生产模式下做封装。
直接在plugin里面new，
打包之后可以看到已经生效了。

小结，css的文件可以通过css-minimizer-webpack-plugin插件来压缩空格等等，减少体积。

认识 Scope Hoisting

Scope Hoistins是wepbpack3新增的功能，作用是对作用域进行提升，并且让webpack打包后的代码更小。运行更快。
我们之前看过源码，webpack打包会有很多的函数作用域。因为他是利用函数作用域来实现一个模块化。而且有大量的闭包，闭包太多性能是比较低的。scope hoisting可以将函数合并到一个模块中来运行。
在生产模式下，该插件是默认开启的/
设置生产模式下的默认配置，有这个插件的使用。
在开发模式下使用也很简单

因为webpack已经内置过了，直接在Plugin属性上使用即可。
当我们配置后，打包后的文件会变得比较少。
可以看到调用的已经在同一个作用域了，看过之前源码的应该知道，如果普通开发模式下，我们是得通过闭包，将路劲放入webpack-require函数，然后这个函数再去调用wbepack-exports对象，在对象里面给我们的export去做代理或者赋值，然后再返回，才能拿到我们的函数来调用，而一旦使用这个插件后，可以看到他们两个的作用域已经是一样的了。这也是性能优化的地方。
注意事项： 内部的原理依赖于静态分析。esmodul是静态分析的，而commonjs是动态分析的。所以该插件是依赖于静态分析的，通过分析判断能不能进行作用域提升。如果我们的项目不是commonjs,那么我们的插件就可能发挥不了多大功能。所以建议以后尽量使用esmodule。而且引入第三方库时，最好也是通过esmodule导入