如何让webpack打包的速度提升50%？

2024-05-13 04:30:48

随着前端应用包含的模块数量日益增长，代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒，对于一般人来说超过10秒的等待是比较难受的，虽然后续增量编辑的速度很快。于是我想结合实际开发环境提升一下首次打包的速度。

1. 实际开发环境

我碰到大多数处于维护状态的网站都有一下几个特性：

模块数量庞大
模块中主要分为js模块和css模块，并且less模块最后使用extract-text-webpack-plugin打包出单独的css文件
webpack入口文件包含了js和less，所以每次打包都需要处理js和less模块
许多需求只涉及到js模块的修改，并不涉及样式修改。反之亦然。

2. 优化思路

既然许多情况下编译less模块不是必须的，那在这些情况下单独编译js模块就能大幅提升webpack的性能。毕竟less的编译、以及css的抽出都非常消耗时间。

3. 优化步骤

优化包含以下两步：

区分编译目标，单独编译js? 还是单独编辑css？还是js+css?
入口文件分离js和css

3.1 区分编译目标

这一步比较简单，我们需要使用cross-env这个插件，例如下面两条编译命令区分了编译js和编译js+css。

{"scripts": {"build:js": "cross-env ctarget=all webpack","biuld:js+css": "cross-env ctarget=js webpack"}
}
复制代码

这样我们就可以在webpack配置文件中通过process.env.ctarget区分当前编译目标了。

3.2 分离js和css

这一步需要通过webpack的loader来实现，可以使用现有的轮子string-replace-loader。

这个loader可以在编译阶段修改代码，并且可以使用正则表达式进行替换。可以使用它来加载js文件，然后删除部分代码。下面的例子的作用是删除js文件中所有的less代码导入。

{module: {rules: [{test: /.js$/,use: (function(){var list = ['这里可以加上其他需要的loader']; // 更具编译目标删除less的导入if (process.env.ctarget === 'js') {list.push({loader: 'string-replace-loader',options: {search: '^.+?require\\(.+(\\.less).+$',replace: '',flags: 'm'}})}return list;})()}]}
}
复制代码

这里在使用string-replace-loader一定要加上flags: 'm'，否则无法进行多行匹配。

如果要单独打包css我们可以写一个和string-replace-loader作用相反的loader，只保留样式部分而删除其他js代码。

4. 效果

经过实际测试，这个优化可以节省50%的时间。当然具体到每一个项目还要看js和css模块数量的比例。

如何让webpack打包的速度提升50%？相关推荐

[vue] webpack打包vue速度太慢怎么办？
[vue] webpack打包vue速度太慢怎么办? 升级webpack4,支持多进程个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
RTX 3090 AI性能实测：FP32训练速度提升50%，张量核心缩水
晓查发自凹非寺量子位报道 | 公众号 QbitAI NVIDIA最近发布了备受期待的RTX 30系列显卡. 其中,性能最强大的RTX 3090具有24GB显存和10496个CUDA核心.而2 ...
掌握这个小技巧，让你的 C++ 编译速度提升 50 倍！
随着 C++ 项目的持续扩大,编译效率越来越是一个问题了.想一想你每天花在这上面的时间,再乘以团队成员的个数,是不是成本很高? 那有没有什么办法,在不需要修改源码,也不更换硬件的情况下提升效率呢?一起 ...
PS原生支持苹果M1Mac，速度提升50%
本文转载自IT之家, IT之家 3 月 10 日消息今天早些时候,IT之家报道了 Adobe 推出 Photoshop 22.3 更新,原生支持苹果 M1 Mac.现在,Adobe 发布新闻稿,称新 ...
Photoshop支持苹果 M1 Mac,速度提升50%
Apple 推出了 M1 芯片以来,许多软件纷纷为此不同架构的芯片提供支持,包含在设计领域占有重要地位的 Adobe,Adobe准备推出Photoshop更新,以提供对M1芯片的支持.在测试中,Ado ...
背单词软件速度对比测试,3个tips，让背单词速度提升50％
说到考研英语,学生们最为忌惮的应该就是单词. 单词记不住,就会导致词汇量不足,而词汇量不足,在英语考试中就会寸步难行:阅读.完形.作文--这些题都需要学生拥有足够强大的词汇量. 在单词的记忆方法上,大 ...
mac webpack 版本_晓前端周刊第48期：EMP面向未来微前端方案正式开源了！玩转 webpack，使你的打包速度提升 90%；...
业界动态苹果最大杀招:iPhone App 已能在电脑运行近日网友反馈,苹果 App Store 中大量应用在兼容性一栏中显示:已支持运行 macOS 11(及以上版本)的 Mac 电脑.这意味着 ...
1. webpack打包速度的优化----happyPack
webpack打包优化的目的 (1). 使打包的体积更小: (2). 使打包的速度更快: 1. 如何使打包的速度更快: (1). 用happypack提升项目的构建速度:happypack只作用在lo ...
如何将 iOS 工程打包速度提升十倍以上
如何将 iOS 工程打包速度提升十倍以上过慢的编译速度有非常明显的副作用.一方面,程序员在等待打包的过程中可能会分心,比如刷刷朋友圈,看条新闻等等.这种认知上下文的切换会带来很多隐形的时间浪费.另一 ...
使用 happypack 提升 Webpack 项目构建速度
本文简单介绍了 Happypack 的简单使用,不了解的同学可以进来看一看.也许会有所帮助. Happypack 作用在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理.当文件数量 ...

最新文章

热门文章