优化 Webpack 的构建速度
2024-10-21 15:34:58
1、使用高版本
的 Webpack 和 Node.js
2、多进程/多实例构建
:HappyPack(不维护了)、thread-loader
3、压缩代码
- webpack-paralle-uglify-plugin
- uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6)
- terser-webpack-plugin 开启 parallel 参数
- 多进程并行压缩
- 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件,通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。
4、图片压缩
- 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式)
- 配置 image-webpack-loader
5、缩小打包作用域
- exclude/include (确定 loader 规则范围)
- resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
- resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤,需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)
- resolve.extensions 尽可能减少后缀尝试的可能性
- noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中,注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
- IgnorePlugin (完全排除模块)
- 合理使用alias
6、提取页面公共资源
- 使用 html-webpack-externals-plugin,将基础包通过 CDN 引入,不打入 bundle 中
- 使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ,替代了 CommonsChunkPlugin 插件
- 基础包分离:
7、DLL分包,避免反复编译浪费时间
- 使用 DllPlugin 进行分包,使用 DllReferencePlugin(索引链接) 对 manifest.json 引用,让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间。
- HashedModuleIdsPlugin 可以解决模块数字id问题
8、充分利用缓存提升二次构建速度
- babel-loader 开启缓存
- terser-webpack-plugin 开启缓存
- 使用 cache-loader 或者 hard-source-webpack-plugin
9、Tree shaking
- purgecss-webpack-plugin 和 mini-css-extract-plugin配合使用(建议)
- 打包过程中检测工程中没有引用过的模块并进行标记,在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块,提高tree shaking效率
- 禁用 babel-loader 的模块依赖解析,否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块,无法进行 tree-shaking
- 使用 PurifyCSS(不在维护) 或者 uncss 去除无用 CSS 代码
10、Scope hoisting
- 构建后的代码会存在大量闭包,造成体积增大,运行代码时创建的函数作用域变多,内存开销变大。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里,然后适当的重命名一些变量以防止变量名冲突
- 必须是ES6的语法,因为有很多第三方库仍采用 CommonJS 语法,为了充分发挥 Scope hoisting 的作用,需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的ES6模块化语法
更多优化请参考官网-构建性能:https://www.webpackjs.com/guides/build-performance
最新文章
- 【高级功能】使用canvas元素(第一部分)
- 1.nodejs权威指南--基础知识
- struts2视频学习笔记 29-30(Struts 2常用标签,防止表单重复提交)
- Linux-同步异步非阻塞阻塞的解析
- 【CSS3】---颜色RGBA及渐变色
- IP101A芯片默认物理地址(PHY Adress)确定
- 存储和读取MYSQL时间戳
- Microsoft Visual Studio 2015 python 安装 mysql-python 出错解决
- 【C++】浅谈三大特性之一继承(三)
- 归并排序(Java)
- Springboot 框架实现rest接口风格
- python2.7.5 安装pip 良心推荐,超级简单.
- SecureCRT 7.3注册机激活
- CentOS7 添加开机启动项
- ftp上传文件异常
- Uploadify火狐出现302错误
- Hbase-indexer常用命令
- Android Studio3.x新的依赖方式(implementation、api、compileOnly)
- 破解swf文件
- shell爬虫简易脚本(线程数可控)
热门文章
- VMware虚拟机 - 如何让鼠标从虚拟机中返回到个人计算机中
- spring mvc 基础知识
- xss攻击与防范
- vue项目中echarts属性总结
- MyBatis学习01
- Android呼吸灯添加
- 分享用MathType编辑字母与数学公式的技巧
- 从这三方面优化你的电脑,保持Mac运行流畅
- 记录一次tomcat问题排查记录:org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid byte tag in constant pool: 19
- 使用javaxmail发送文字邮件