Webpack项目性能优化

·  阅读 655

最近项目经过巨大无敌十分变态的迭代,现在项目变得十分臃肿。整个项目启动起来已经快耗时2分钟。打包出来整个包超1.4m

显然这种性能是不能接受的。前端小组决定对项目进行整个系统流程的优化。

下面主要介绍一下打包的优化手段。

1、 引入依赖时按需调用,不再将整个外部依赖引入进来。

对于整个项目依赖的管理,我们发现其实很多依赖我们仅仅是使用到其中的一小部分功能,例如ui库其实很多组件我们并没有用到,echart更是只用了冰山一角的功能。讲依赖的功能按需引入后,我们发现后续打出来的包体积小了几百K.

2、多进程

通过增加打包线程来提高打包速度,有thread-loader、happypack、terser等多种方案。本地验证后不推荐happypack,对loader有兼容性的问题。直接pass掉。

3、webpack dll加速

在windows里面,dll后缀文件叫动态链接库。dll就是搬用了这一套概念,其实际原理就是把一些常用的依赖缓存起来。其实原理和commonChunks的原理相似,都是将公共依赖分离开来。但和commonChunks不同的是,dll会生成一个manifest.json文件来映射分离开的依赖。关键是commonChunks每次打包启动时,仍然会处理第三方依赖。而dll每次只会处理项目相关的代码文件。通过DllReferencePlugin 这个插件,把在webpack.dll.config.js中打包生成的dll文件引用到需要的预编译的依赖上来。也就是说其实DLL对于生产的部署其实并未有优化,但对本地的开发性能优化能有比较大的变化。

4、webpack hardsourcewebpackplugin

目前发现最最最牛逼的插件,直接把项目启动速度降低到了20秒。强大到不可置信。但强大终究是需要付出代价的,代价1,hardsourcewebpackplugin需要冷启动一次处理缓存,也即项目初次启动时间甚至会比原来更长。代价2: hmr时间平均每次耗时提高。

5、其他

webpack devtool生成source map方法调整提高hmr,通过alias别名提高模块查找速度。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改