Webpack性能优化---构建速度

一.优化babel-loader

二.Noparse

Noparse

这是module中的一个属性，作用：
不去解析属性值代表的库的依赖

三.IgnorePlugin

IgnorePlugin

是webpack内置插件
这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去

四.happyPack多进程打包

要下载happypack


在plugin中

id的值可以变，但是上下要对应

五.ParallelUglifyPlugin多进程压缩js

webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢

首先要安装这个插件

webpack.prod.js的 plugin里面

六.如何配置自动刷新

了解即可，在我们配置devserver的时候，已经自动配置了 自动刷新了

七.如何配置热更新

什么是状态不丢失，就是input输入200 进行页面刷新，input输入框里面的200会清空，这就叫状态丢失

首先热更新一定是在开发环境下
webpack.dev.js

index.js

只有在math.js更改代码才会触发热更新

网页刷新确实影响了开发的体验，再配置热更新，否则没必要

八.Dllplugin动态链接库

开发模式使用


先dllplugin把 vue或者react 打包成dill文件 然后用另一个插件使用

首先webpack.dill.js文件中
①配置dllplugin生成一个 （package.json进行相关配置）一个js文件 生成一个json文件
②js文件 index.html进行引入
③ json文件用dllreferenceplugin进行映射

①

npm run dll 之后

②

③.webpack.dev.js

九.总结

ParallelUglifyPlugin 压缩一般只用于生产环境

除了上面的，其他都不用于生产环境