webpack优化,webpack dll
动态链接库的方案可谓是很多人用的经典方案
但是睡着webpack的升级,打包性能还是逐步提高了很多,我们也希望减少配置带来的复杂关系,那么最优化最小化配置的,必然是最好的选择,下面介绍一下 hard-source-webpack-plugin以及和dll的对比
dll
其实是做缓存
所谓动态链接,就是把一些经常会共享的代码制作成 DLL 档,当可执行文件调用到 DLL 档内的函数时,Windows 操作系统才会把 DLL 档加载存储器内,DLL 档本身的结构就是可执行档,当程序有需求时函数才进行链接。透过动态链接方式,存储器浪费的情形将可大幅降低。
将dll和缓存进行对比可以发现:
个人理解的dll基本过程:
1、第一次npm run的时候,把请求的内容存储起来(存储在映射表中)
2、再次请求时,先从映射表中找,看请求的内容是否有缓存,有则加载缓存(类似浏览器的缓存策略,命中缓存),没有就正常打包。
3、直接从缓存中读取。
hard-source-webpack-plugin
在项目实现的过程中,想在代码更改的同时,查看效果的改变,而这个时候长时间的编译等待,造成了额外的时间浪费。
更好的代替者DLL,选择hard-source-webpack-plugin
HardSourceWebpackPlugin是webpack的插件,为模块提供中间缓存步骤。为了查看结果,您需要使用此插件运行webpack两次:第一次构建将花费正常的时间。第二次构建将显着加快(大概提升90%的构建速度)。
1、安装
npm install --save-dev hard-source-webpack-plugin
2、配置文件
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ......
plugins: [
new HardSourceWebpackPlugin() // <- 直接加入这行代码就行
]
}
更多关于配置hard-source-webpack-plugin可以查看官网hard-source-webpack-plugin