谁知道哪有靠谱的黑客?在哪找正规的黑客

Web 应用日益复杂，相关开发技术也百花齐放，这对前端构建工具提出了更高的要求。 Webpack 从众多构建工具中脱颖而出成为目前最流行的构建工具，几乎成为目前前端开发里的必备工具之一。大多数人在使用 Webpack 的过程中都会遇到构建速度慢的问题，在项目大时显得尤为突出，这极大的影响了我们的开发体验，降低了我们的开发效率。

本文将传授你一些加速 Webpack 构建的技巧，下面来一一介绍。

通过多进程并行处理

由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。运行在 Node.js 之上的 Webpack 是单线程模型的，也就是说 Webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。

文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？

使用 HappyPack

HappyPack 就能让 Webpack 做到上面抛出的问题，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

接入 HappyPack 的相关代码如下：

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HappyPack = require('happypack');

module.exports = {

module: {

rules: [

{ test: /\.js$/,

// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例

use:['happypack/loader?id=babel'],

// 排除 node_modules 目录下的文件，node_modules目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换

exclude: path.resolve(__dirname, 'node_modules'),

{

// 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例

test: /\.css$/,

use:ExtractTextPlugin.extract({

use: ['happypack/loader?id=css'],

}),

] },

plugins: [

new HappyPack({

// 用唯一的标识符 id 来代表当前的HappyPack 是用来处理一类特定的文件

id: 'babel',

// 如何处理 .js 文件，用法和 Loader配置中一样

loaders: ['babel-loader?cacheDirectory'],

}),

new HappyPack({

id: 'css',

// 如何处理 .css 文件，用法和Loader 配置中一样

loaders: ['css-loader'], }),

new ExtractTextPlugin({

filename: `[name].css`,

}),

};

以上代码有两点重要的修改：

在 Loader 配置中，所有文件的处理都交给了 happypack/loader 去处理，使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
在 Plugin 配置中，新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应，选项中的 loaders 属性和 Loader 配置中一样。
接入 HappyPack 后，你需要给项目安装新的依赖：

发表于 2020-11-29 12:51
阅读 ( 210 )
分类：互联网