时间：   |   分类：   | 字数： 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分钟左右.

0%