webpack优化实践-个人笔记

抽象语法树

使用speed-measure-webpack-plugin插件，查看各个打包部分耗时：

一，缩短解析时间

优化的方法两种方法：

方法二导入后，就可以在webapck.base.js文件中对比较耗时的部分使用thread-loader，比如html、js、css的部分。

优化的第三种方法：
使用缓存，使得二次打包的时候速度可以加快。(比如第二次打包与第一次打包相比，只有少部分文件存在修改，那么没有修改的部分使用缓存即可)

在thread-loader和cache-loader一起使用的使用，应该把thread-loader放在前面，cache-loader放在后面。

babel-loader也是使用缓存，只不过他是根据文件内容判断是否有修改。相对来说性能耗时更大（更耗时，所以也是有代价的，看具体情况再判断是否使用），但同时不会影响到其他loader。

cache-loader原理（流程）：

babel-loader原理（流程）：

区别：

二，缩短搜索时间

第三步，缩短打包耗时

第二步。smaller = faster 。分包，webpack4在webpack3基础上做了优化。

webpack4分包更细，抽取公共部分更多，使得导入使用时利用率更高。

使用webpack4的时候，就不用设置名字name了，不然会默认打包成一个名字，就不会分包了。就跟webpack3没什么区别了。

minSize不能太细，太细就会打包很多很细，加载页面会更加耗时。

参考博客：
https://blog.csdn.net/liuyan19891230/article/details/104912495