前端资源打包在每个项目中都会有涉及,从如何优化构建速度和优化构建输出代码来说明一些方法。
开发完后本地构建,然后通过push到cnd同步资源。可能是传统大家喜欢做的思路,没毛病,也挺好用的。
不足:加重了仓库的体积,对于仓库中的语义化的npm包,本地构建不能实时享受到包的更新。
优点: 适合于多人项目合作初期,或者依赖的一个三方包也处于一个不断迭代的过程,每个人开发的过程中仅仅打包自己的页面,互相不干扰
服务端构建,大致就是当资源push的时候,会在一台构建机器上面跑类似ci的服务,同时也会有打包的服务
优缺点基本就是本地的相反,但是还是比较推荐这样的方案
粗暴点其实大家可能希望这个配置可以自动化生成,而且可以仅有一份来做,思路是没错,但是其实应该做一些区分
功能 | 本地开发 | 线上发布 |
---|---|---|
压缩代码 | 需要 | |
babel-polyfill | 一般不需要 | 看业务需求 |
分离样式 | 需要 | |
删除console.log | 需要 | |
css Prefix | 需要 | |
OccurrenceOrderPlugin | 需要 | |
DedupePlugin | 需要 | |
Babel present转码 | 需要 |
其实比较合理的方式应该是用环境变量来区分进行不同环境下不同的配置,ps:设置环境变量为了在window兼容,可以使用cross-env 来设置
以上的对比没有进行测试,感兴趣的同学可以试试看,在老的基础上修改会有多少的优化。
总结起来就是本地开发只求速度快,能少处理一点是一点
可以在社区中看到很多相关类似的文章来做webpack的优化,各种各样的提速,可能都知道,但是懒得做,但其实一旦完成后,带来的受益是巨大的。
externals
这可能是最暴力最提速的方法之一,把其中的一些库从中忽略掉,如果extern react了,需要注意的是最好把相关的一些react-addons-transition-group也给extern掉,否则有可能会出现依然打入多份react的问题,因为react-addons-transition-group这样的包里面代码是类似如下方式,externals并不能排除
module.exports = require('react/lib/ReactTransitionGroup');
Dll
将一些可预见性的库从中抽离,预打包,可以极大的提速,当时还是有蛮多需要注意的,比如同样的包最好全局只有一份,预打包后不能享受到语义化版本的资源跟新,需要结合实际问题来看是否需要。
HappyPack
常用套路加速
const os = require('os');HappyPack.ThreadPool({size: os.cpus().length })
一些配置
设置一些alias,同时可以适当设置一些loaders中的exclude等
设置css-loader版本号
提速特别明显
"css-loader": "^0.14.5",
相关Issue
替换scss-loader 为fast-sass-loader
相比起来比scss-loader速度更快
不用webpack自带的uglfiyJS
用自带的uglfiyJS来做压缩速度比较慢,这边有俩思路,但原理应该是一样的
这个方案优化一般来说可以提速一半左右
js和scss的分离
这个可以优化本地开发过程中的rebuild速度,尽量让scss文件和js文件分离,如果使用了一些ui库,可以引用UI库的css文件,而不是scss文件,省去每次的scss build过程
本文分享自 nginx遇上redis 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!