大家好,我是心锁,一枚23届准毕业生。
这次的文章主题是「webpack」,将叙述我在腾讯的QAPM项目中进行前端工程化的实践,前方高能预警⚠️
阅读本文,你将会了解到
值得注意的是,这次我们只讲实践,不入原理。
webpack5带来了几个非常管用的新特性,包括
前两个特性在我们的项目中的适用场景相对较广,而打包体积优化这一项则是前端工程化喜闻乐见的
Webpack5不再需要使用--env.key=value
的语法,现在使用--env key=value
webpack-dev-server config.js
->webpack server config.js
出于兼容考虑,我们需把webpack-dev-server
升级到最新版本
npm install -D webpack-dev-server@latest
webpack5之前,通过url-loader
与file-loader
等loader来决定一些静态资源的加载。
而现在我们只需要指定type:
asset/resource
会将对应的资源加载成url,对应以前的file-loader
asset/inline
导出一个资源的data URL,对应以前的url-loader
asset/source
,对应以前的 raw-loader
asset
,可以在这里通过限制limit 来决定使用inline还是resource"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3",
webpack升级到5.x的情况下,至少需要把这些webpack相关的依赖包更新到最新版本(我这里都是通过@latest更新)
npm install webpack@latest webpack-cli@latest webpack-dev-server@latest
依据官方的说法,webpack5之后不再默认为工程注入NodeJS polyfill,即如果你在webpack4版本的代码中使用了类似process
这样的Node变量,需要手动安装依赖与配置fallback。
当然这是一个好事情,因为不需要注入所有垫片,可以减少构建体积
检查下表,这是webpack官方给出webpack4使用的polyfill包
像process
的使用在webpack4是无需导入的,但是在webpack5这里我们最好手动导入
举个例子,QAPM项目中使用到了webpack-cos-plugin
插件进行生产环境下编包自动上传,然而遗憾的是webpack-cos-plugin
最新版也只支持到webpack4,在这种情况下我们只能替换插件。
幸运的是社区有同学开发了webpack5-cos-plugin
,完全兼容webpack-cos-plugin
构建时间越短,整体开发体验越好。
我们在开发环境引入了speed-measure-webpack-plugin
用来测速
开启持久化缓存可以大幅降低我们项目二次构建的时间,非常建议开启,建议使用filesystem
,使用memory
对于中大型项目会吃不消
使用webpack打包文件的时候,可以选择生成sourcemap
文件。
按照社区推荐
eval-cheap-module-source-map
,内联sourcemap,减少构建时间。source-map
,生成专门的.map.js
文件,一般来讲根据具体需求删除或者移动sourcemap文件,增加代码被反编译的难度大部分项目中,node_modules
的变换频率都是极低的,所以我们在使用watch功能的时候可以通过配置
ignored
来忽略node_modules
从而减少性能压力
之前的QAPM项目中,不管是开发环境还是生产环境一开始都是通过MiniCssExtractPlugin
生成css文件并引入页面的方式来使用css
然而这是不对的,一方面MiniCssExtractPlugin
并对于热更新HMR支持的不是很好
(这里还有一个问题,开发环境配置hash
会使得构建性能进一步下降)
我这里的解决方案是在开发环境中使用style-loader
,这个loader作为webpack的入门级loader天然支持HMR并且简单易用,同时性能上也相对比较好。
这个其实没啥好说的,记得把缓存打开,同时最好设定一定的exclude
,比如去除node_modules
React已经为我们打包了生产环境需要使用的文件,这样可以跳过编译环节
这里的优化点总结如下
exclude
排除node_module
react-refresh/babel
为React项目添加热更新能力我们在生产环境构建的config文件中使用webpack-bundle-analyzer
来分析打包体积
由于lodash是一个UMD规范的包,所以默认做的全量引入
我们可以通过LodashModuleReplacementPlugin
来移除你未用到的lodash特性
webpack 打包momentjs时会把所有语言包都打包,这样会使打包文件很大。此插件可以帮助我们只打包需··要的语言包,大大减小打包文件大小。
限定查找 moment/locale 上下文里符合 /zh-cn|en-gb/ 表达式的文件,只打包这几种本地化内容
通过PurgeCSS
来进行CSS体积优化,CSS的作用原理是通过正则,所以建议使用PurgeCSS时一定要配置好白名单,同时保证选中所有的使用到样式文件类的地方。否则可能会丢失样式
SplitChunks插件是webpack中用来提取或分离代码的插件,主要作用是提取公共代码,减少代码被重复打包,拆分过大的js文件,合并零散的js文件
在webpack5中使用,我们可以根据实际情况进行拆包,从而减少构建体积。(一般拆一下node_modules)
对于这里的规则,将只说只说一些重点
minChunks
:引用阈值,被引用次数超过该阈值的模块才会被拆包处理;maxInitialRequest/maxAsyncRequests
:用于限制Initial/Async Chunk最大并行请求数,本质上是在限制最终产生的分包数量;minSize
: 超过这个大小的 Chunk 会被拆包;maxSize
: 超过这个大小的 Chunk 会尝试继续拆包;cacheGroups
:缓存组规则,为不同类型的资源设置更有针对性的拆包策略。priority
: 优先级,在缓存组规则中使用配置compression-webpack-plugin
插件,生成额外的gzip静态文件
这种形式对于我们使用nginx
的项目只需要简单开启gzip_static和gzip_proxied
如果使用CDN的话就要看服务商有没有提供相关功能
webpack优化走一圈下来,其实准则很简单,无非「最小化约束」「持久化赋能」「分化生产开发」
说人话就是多用exclude
约束作用范围,多使用缓存提升二次构建性能,区分生产环境与开发环境分化不同的需要。
最终输出一份对比报告