Webpack 打包性能优化之多进程

概述


多进程的打包方式可以有效提高打包速度,这其实跟 CPU 执行任务的方式有关系。我们可以简单说说为什么多进程打包会比较快:CPU 在某一个时间点只能处理一件事情(在这里我们粗暴的认为就是运行某个进程),假如说现在总共运行着 100 个进程,那么1个打包进程被执行到的概率就是1%,但是如果我们有 5 个进程是执行打包的,那么打包进程被运行到的概率就是 5%!说白了就是人多好办事!


方案细节


第一步:安装 thread-loader

npm i thread-loader -D

第二步:使用 thread-loader

因为它是一个 loader,所以它跟一般的 loader 使用方法是一样的。具体使用方式如下:

{

    test: /\.js$/,

    exclude: /node_modules/,

    use: [

        'thread-loader',

        {

            loader: 'babel-loader',

            options: {

                ...

            }

    ]

}

有些小伙伴使用 thread-loader 以后,发现打包时间不但没有变短而且变长了! 这又是怎么回事呢?因为启动多进程是需要耗费额外的时间的,大概是600ms,而且进程间需要通信以同步打包的进度,所以多进程打包比较适合在原本打包时间比较长的场景下使用。对于本来打包时间就很短的场景来说,使用多进程反而是得不偿失!在使用多进程打包时,我们一般会把它和 babel-loader 一起使用,因为一般来说 babel-loader 编译js代码的过程是比较耗时的!

注意:thread-loader 一定要放在 babel-loader 前面。根据 loader 的执行顺序,thread-loader是其实后执行的,这个顺序不能变!


结语


上面提到我们一般会把 thread-loader 跟 babel-loader 一起使用,当然我们也可以跟其他 loader 一起使用。总的来说,我们需要充分考虑自己的项目场景,有选择的去使用 thread-loader,这样才能事半功倍。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容