webpack优化以及node版本

最近做的这个项目webpack用的是1.X的版本&＃xff0c;真的非常多的坑&＃xff0c;然后最近在疯狂的做优化&＃xff1a;

事情的起因是每次我npm run dev的时侯都需要5分钟&＃43;&＃xff0c;这个速度真的是难以忍受&＃xff0c;然后就尝试去做项目的优化。

首先引入了webpack-bundle-analyzer来分析项目的包大小&＃xff0c;于是发现有些文件真的大到难以忍受。先讲下这个插件怎么用&＃xff1a;

1.先安装&＃xff1a;

我平时都喜欢用yarn add来安装确实比npm i 的速度快

2.在webpack中配置&＃xff1a;

3.在package.json的script中加入&＃xff1a;

但是这里不能直接NODE_ENV&＃xff0c;需要用到另一个插件&＃xff1a;cross-env

这里我就不赘述了&＃xff0c;可以百度看下如何使用cross-env

然后查看完自己的项目之后发现可以提取有些垃圾代码&＃xff1a;

这就是analyz之后的结果&＃xff0c;发现好多页面都引入了&＃xff1a; 

 其实项目的入口是在全局引入了knockout的&＃xff0c;所以在每个页面引入的knockout是不必要的。

优化之后&＃xff1a;

除此之外webpack还有一个优化神器&＃xff0c;那就是&＃xff1a;CommonsChunkPlugin

最后&＃xff0c;你发现你的npm run dev还是很慢的话&＃xff0c;你可以考虑试着降低node的版本了&＃xff0c;我降低版本之后发现速度差不多是<2分钟了&＃xff0c;之前node是10的版本&＃xff0c;后面node的版本降到了8就改善了