前端性能优化三十：花裤衩模板多线程执行优化

完美句号

已于 2023-12-25 10:39:04 修改

阅读量391

点赞数 8

文章标签：前端 webpack 自动化性能优化

于 2023-12-25 10:35:02 首次发布

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135193782

版权

文章探讨了Webpack构建中文件编译和打包的痛点，强调了单线程模型导致的效率问题。HappyPack被提及作为一种多线程解决方案，但因其对某些Loader的支持不足，推荐使用DLLPlugin来加速编译。实战部分展示了如何在Vue项目中集成HappyPack。

摘要由CSDN通过智能技术生成

(1). 痛点:

①. webpack构建过程中的有两个部分是直接影响构建效率:
    a. 文件的编译(更为耗时).
    b. 文件的分类打包.

②. js是单线程模型:
    a. Node环境下文件只能一个一个去处理,webpack执行预处理文件时单线程的.

③. 在webpack构建过程中:
    a. 需要使用Loader对js、css、图片、字体等文件做转换操作.
    b. 并且转换的文件数据量非常大,不能并发处理文件,需要一个个文件进行处理.

(2). HappyPack多线程执行:

①. HappyPack可以多线程处理文件:
    a. HappyPack把任务分解给多个子进程去并行处理,子进程处理完后再把结果发送给主进程.
    b. HappyPack对file-loader、url-loader支持不友好,所以,不建议对该loader使用.

②. webpack4发表后,happypack已经不维护了,有新的thread-loader代替.

③. 如果单纯地想加快编译打包速度的话,不如上dllplugin,比thread-loader快.

2. 实战:

(1). 安装:

yarn add happypack -D

(2). vue.config.js:

const HappyPack = require('happypack');
module.exports = {
    chainWebpack: config => {
        // 多线程
        config.plugin('HappyPack').use(HappyPack, [
            {
                loaders: [
                    {
                        loader: 'babel-loader?cacheDirectory=true'
                    }
                ]
            }
        ])
    }
}