背景:
由于公司taro小程序项目比较庞大,每次启动编译都需要花费大约70s(加上sourceMap配置后接近90s),每次等待项目启动编译结束都是漫长的,同时由于涉及生产环境,项目版本框架都无法轻易升级。这里通过两个babel配置将二次编译速度缩减到20s左右。 优化前:
优化后:
注:
本文核心配置都借鉴自 cloud.tencent.com/developer/a...
1、使用到的plugin
- progress-bar-webpack-plugin: 查看编译进度
- speed-measure-webpack-plugin: 可以看到各个 loader、plugin 的构建时长,后续可针对耗时 loader、plugin 进行优化。
2、使用到的loader
- thread-loader: 利用cpu多核,将耗时任务丢到单独的进程里执行 注意:thread-loader 只有在中大型项目中 提速效果才会比较明显,小型项目中甚至会让编译时间增长
- cache-loader: 每个模块的处理结果缓存到磁盘上的文件中。当下一次构建时,如果模块的内容没有发生变化,cache-loader 将直接从缓存中读取处理结果,而不会再次执行相同的处理过程。这样可以避免重复的耗时操作,加速构建过程。
3、webpack中的配置方法 直接将cache-loader 和thread-loader 前面即可生效
java
module.exports = {
// ...其他配置
module: {
rules: [
{
test: /\.js$/, // 指定需要使用 thread-loader 的文件类型
use: [
'cache-loader',
'thread-loader', // 在这里添加 thread-loader
// 其他 loader
// 例如:'babel-loader'
],
},
// 其他规则
],
},
};
二、在taro项目中如何进行配置 主要针对 webpack4,webpack5 优化非常简单可以直接搜索其他文章学习
遇到的问题:webpack4 匹配的 thread-loader和babel-loader版本都是2. 不指指定版本安最新版 会报 this.getOptions is not a function 的错误
- 找到taro框架合并后的webpack对象 地址 @tarojs/mini-runner/dis/index.js
- 断点查看合并后的 webpack格式
- 根据看到的格式,添加自己的配置
php
webpackChain: (chain, _webpack) => {
<!-- 先删除 taro自带的babel配置-->
chain.module.rules.delete('script')
<!-- 在scss-loader之前加入cacheLoader 为什么这样配置,前面的参考原文中有讲述,不再赘述-->
chain.module.rule('scss').oneOf('0').use('cacheLoader').loader('cache-loader').before('1')
chain.module.rule('scss').oneOf('1').use('cacheLoader').loader('cache-loader').before('1')
chain.merge({
module: {
rule: {
script: {
test: /\.[tj]sx?$/i,
use: {
threadLoader: {
loader: 'thread-loader', // 多核构建
},
babelLoader: {
loader: 'babel-loader',
options: {
cacheDirectory: true, // (除了可以是用cache-loader开启缓存也可以用过配置cacheDirectory: true开启)
},
},
},
},
},
},
})
},