zhimoe

the craft of programming


  • 首页

  • 归档

  • 编程

  • 翻译

  • 项目

  • 关于

  • 搜索

使用speed-measure-webpack-plugin和Happypack优化webpack打包速度

时间: 2021-09-12   |   分类: 编程   | 字数: 655 字 | 阅读: 2分钟

问题

一个ionic app本地编译需要8分钟,提交到流水线编译耗时需要近40分钟,从日志看到webpack打包步骤耗时最严重.

排查与解决

初步判断是流水线使用的容器CPU性能较弱或者存储mount性能导致的.找流水线同事支持配置了一个纯内存编译流水线,发现还是很慢. 接下来使用webpack的插件speed-measure-webpack-plugin监控性能.

在webpack.config.js配置:

// webpack.config.js

// npm i --save-dev speed-measure-webpack-plugin
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...the webpack configuration
const prodConfig = {/*...*/}
module.exports = {
    prod: smp.wrap(prodConfig)
};

得到下图左侧的结果,可以看到主要耗时都在angular的PurifyPlugin上.搜索了一番后找到HappPack这个多核执行的插件.
smp-result-before-and-after-happypack
配置happypack,由于主要耗时都在const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;插件上,这里只需要针对这一个插件配置happypack即可.

// webpack.config.js
// 
const HappyPack = require('happypack');
const os = require('os');//获取cpu core数量

//loaders配置
{
    test: /\.ts$/, 
    use: [
    {
        loader: 'happypack/loader?id=ts', // 在所有loader之前加上happypack/loader,id是plugins中定义的
    },
    {
        loader: process.env.IONIC_CACHE_LOADER
    },
    {
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: {
            sourceMap: true
        }
    },
    {
        loader: process.env.IONIC_WEBPACK_LOADER
    }
    ]
}

// 在plugins中配置happypack插件
plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new ModuleConcatPlugin(),
    new PurifyPlugin(),
    new HappyPack({
        id: 'js',
        threads: os.cpus().length,
        loaders: ['@angular-devkit/build-optimizer/webpack-loader']
    }),
    new HappyPack({
        id: 'ts', // 在loader中使用
        threads: os.cpus().length, // 开启操作系统cpu的最大核心数
        loaders: ['@angular-devkit/build-optimizer/webpack-loader']
    })
    
]

再次本地执行,性能提升巨大.在流水线上测试,两次build都在15分钟左右.

#code# #JS# #webpack#

文章: 使用speed-measure-webpack-plugin和Happypack优化webpack打包速度 by zhimoe

声明: 本博客文章除特别声明外,均采用 CC BY-NC-SA 3.0许可协议,转载请注明出处!

创作不易,打赏作者 ^_^
WeChat Pay

微信打赏

Alipay

支付宝打赏

Scala3 缩进语法总结表
在githook中调用nodejs脚本
  • 文章目录
  • 站点概览
zhimoe

zhimoe

Captain your own Ship.

64 日志
4 分类
41 标签
GitHub ZhiHu
书签
  • 可视化学习Git
  • 美团技术团队
  • 艺术绘画
  • 500px
  • RustCheatsheet
  • 谷歌机器学习课程
标签云
  • Code
  • Java
  • Scala
  • Python
  • Rust
  • Spring
  • Docker
  • Git
  • Wsl
  • Aop
    • 问题
    • 排查与解决
© 2010 - 2023 zhimoe
0%