浅谈webpack 构建性能优化策略小结

【背景介绍】

随着前端工程化的趋势日益显著，webpack因其丰富的功能和灵活的配置，逐渐成为前端工程实践中的首选工具。在众多知名项目中，如React、Vue和Angular等，webpack均被选为官方构建工具，充分展现了其在前端开发中的重要性。随着工程开发的复杂程度和代码规模的增加，webpack构建过程中暴露出的性能问题逐渐凸显，对开发体验产生了一定影响。本文将针对这些问题，webpack构建性能的优化策略。

【问题概述】

Webpack面临的主要性能问题包括：代码全量构建速度慢，即使是小改动也需要等待较长时间；随着项目复杂度增加，构建的模块体积急剧增大；多个项目间共用基础资源存在重复打包，基础库代码复用率低；以及Node.js单进程在耗CPU计算型loader中的表现不佳等问题。针对这些问题，我们可以利用webpack的现有机制和第三方扩展插件来寻找解决方案。

【】

我们需要明确“慢在何处”。作为工程师，我们需要理性思考，用数据和事实说话。我们可以通过以下几个方面来进行分析：从项目结构、webpack的优化手段，以及webpack自身的不足来寻找优化的切入点。

在这个过程中，我们可以使用一个webpack的可视化资源分析工具——webpack-bundle-analyzer。这个工具在webpack构建时，可以自动计算各个模块在项目工程中的依赖与分布情况，帮助我们进行更精确的资源依赖和引用分析。

分析过程中，我们往往发现依赖库的体积占据整个工程项目的绝大部分。在每次开发过程中，这些依赖资源会被重新读取和编译，造成很大的资源浪费。对此，我们可以采取以下优化策略：

【优化方案一】合理配置CommonsChunkPlugin

Webpack的资源入口通常是以entry为单元进行编译提取。当存在多个entry时，我们可以使用CommonsChunkPlugin对所有的依赖chunk进行公共部分提取。这个插件的作用是以module为单位进行提取公共部分，而非简单地抽取某段代码。

例如，假设我们的页面中有entry1、entry2、entry3三个入口，这些入口可能都会引用utils、loadash、fetch等通用模块。通过合理配置CommonsChunkPlugin，我们可以对这部分共用模块进行提取，从而优化构建性能，减少资源浪费。

除了上述方案，我们还可以考虑其他优化策略，如使用DllPlugin进行动态链接库的预编译，减少重复打包；利用Tree Shaking技术消除无用代码；使用HappyPack或thread-loader等多进程并行处理loader等。这些策略都可以帮助我们进一步提升webpack的构建性能。

通常，提取方式有以下几种实现策略：

策略一：通过CommonsChunkPlugin实现自动计算提取

Webpack的CommonsChunkPlugin插件可以帮助我们提取公共代码。有两种主要的实现方式：

方法一：自动提取所有入口节点的公共代码。

使用方式如下：

`new webpack.optimizemonsChunkPlugin('mon.js')`

这将会默认提取所有入口节点的公共代码，并生成一个名为'mon.js'的文件。

方法二：有选择的提取公共代码。

使用方式如下：

`new webpack.optimizemonsChunkPlugin('mon.js',['entry1','entry2'])`

仅提取entry1和entry2中的共用部分模块，生成一个mon.js文件。

还可以通过设置更复杂的条件进行提取。例如，可以指定引用次数，或者将特定路径下的模块提取出来。示例代码如下：

`new webpack.optimizemonsChunkPlugin({ name: 'vendors', minChunks: function (module, count) {...} })`

这段代码会提取所有node_modules中的模块至vendors中，也可以指定minChunks中的最小引用数。

策略二：通过添加entry来实现特定库的提取。

我们可以创建一个名为vendors的entry，并将需要的库添加到其中。然后使用CommonsChunkPlugin自动将这些库提取至vendors中。示例代码如下：

`entry = { vendors: ['fetch', 'loadash'] }; new webpack.optimizemonsChunkPlugin({ name: "vendors", minChunks: Infinity });`

通过这种方式，我们可以更灵活地管理和优化我们的代码。

方案二：通过 externals 配置来提取常用库

在实际项目开发过程中，我们有时并不需要实时调试各种库的源码。这时，我们可以考虑使用externals选项。

externals是一种声明外部依赖的方式，通过script引入外部脚本。这是一种传统的页面资源引入方式的改进版。通过配置externals，我们可以告诉webpack在遇到此类变量名时，不用和编译至模块的内部文件中，而是从外部变量中读取。这样做可以极大地提高编译速度，也能更好地利用CDN实现缓存。

这两种策略都可以帮助我们更有效地管理和优化webpack的构建过程，提升项目的性能和效率。外部库的配置过程相对简洁，只需三步即可完成。接下来，我将为您详细阐述每一步操作及其重要性。

一、引入所需的库文件

在HTML页面的``标签内，引入所需的JavaScript库文件。例如：

```html

```

这些库文件提供了页面所需的功能模块，是构建应用程序的基础。

二、配置Webpack的external选项

在Webpack配置文件`webpack.config.js`中，加入`external`配置项，指定哪些模块是外部提供的，不需要Webpack再次打包。例如：

```javascript

module.export = {

externals: {

react: {...}, // 指定React为外部模块

'react-dom': {...}, // 指定React DOM为外部模块

'react-router': {...} // 指定React Router为外部模块

}

}

```

这里需要注意，在配置前，需要对这些资源进行模块化封装，使其兼容AMD、monjs等不同的模块化规范。这样，Webpack在加载这些模块时，才能正确地识别和应用它们。这类JS文件通常会包含如下的兼容性代码：

```javascript

预编译资源模块：DllPlugin与DllReferencePlugin的巧妙运用

在项目中，我们常常引入众多的npm包，这些包在开发过程中并不经常变动，却每次构建时都需要反复。那么，如何避免这种损耗呢？这里要介绍两个非常有用的插件：DllPlugin和DllReferencePlugin。它们可以帮助我们预先编译和引用模块，从而提升构建效率。

想象一下，如果你正在为一道复杂的菜肴准备食材。DllPlugin就像是预先帮你炒制好一部分调料，而DllReferencePlugin则是将这些已炒制好的调料巧妙地加入到你的菜肴中。这样，你在烹饪时就不必每次都亲自炒制调料，大大节省了时间。

相较于externals，dll预编译的模块更像是一个静态资源链接库，可以被多个项目重复使用。这就像是一个大型站点中的PC和手机版共享资源一样，极大地提高了资源利用率。

对于那些导致资源循环依赖的问题，dll预编译的方式提供了有效的解决方案。比如某些从核心库中抽取的资源包，如react-addons-css-transition-group，原本需要通过module.exports指向特定路径，这可能导致在通过externals引入的资源时，无法正确索引到具体路径下的资源。

使用externals时，通常需要为每个依赖库手动定制配置，每次增加组件都需要繁琐地修改配置。而dllPlugin则能通过简单的配置文件读取，大大减少维护成本。

那么，如何使用dllPlugin呢？只需增加一个配置文件webpack.dll.config.js即可。这个配置文件首先引入必要的模块，然后根据项目的实际需求配置资源依赖包，提前进行编译。这些预先编译的文件可以在后续的构建过程中被快速引用，从而提高构建效率。

这样配置化的管理不仅提升了开发效率，也让代码维护变得更加简单和清晰。再也不用担心因为手动修改依赖路径导致的资源索引问题，也无需每次增加组件时都繁琐地修改配置。通过dllPlugin的巧妙运用，我们可以更加高效地管理和构建项目，让开发过程更加顺畅。webpack构建性能优化之路

======================

让我们从一次基础的配置开始，这里我们使用webpack进行库打包配置。通过以下步骤，我们可以构建一个支持调试和生产环境的静态资源库。

我们定义一些基础的配置：

```javascript

const name = '[name]';

const context = __dirname;

const plugins = [];

const outputPath = ...; // 输出路径配置

const fileName = ...; // 文件名配置

const lib = ...; // 入口配置

```

针对生产环境，我们需要启用压缩和优化。因此当不在调试模式时，我们将添加DefinePlugin和UglifyJsPlugin插件到我们的插件数组中：

```javascript

if (!isDebug) {

plugins.push(

new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),

new webpack.optimize.UglifyJsPlugin({ / 配置压缩选项 / })

);

}

```

我们的模块导出配置如下：

```javascript

module.exports = {

devtool: 'source-map', // 配置源码映射方式，便于调试

entry: { lib }, // 配置入口文件路径及名称等参数

output: { / 输出配置参数 / }, // 输出路径、文件名等配置信息

plugins: plugins, // 配置插件数组，用于处理编译过程的各种需求，如压缩、定义全局变量等。

};

```

然后执行相应的webpack命令进行构建。构建完成后，我们会得到相应的资源文件，包括lib.js和manifest.json等。其中lib.js是我们的编译好的静态资源文件，可以直接在页面中引入；manifest.json保存了webpack中的预编译信息，有助于我们在实际开发过程中避免重复编译。我们还介绍了如何使用DllPlugin来引入静态资源。在实际应用中，我们可能需要在不同的环境下引入不同的资源文件，这时我们可以通过修改src链接来实现。我们也可以使用webpack的DllReferencePlugin插件来引入依赖资源的manifest文件。这有助于我们实现纯业务模块的提取和多个工程之间的资源共享。我们了使用Happypack来加速代码构建的可能性。通过优化资源的编译过程和速度，我们可以进一步提高webpack的构建性能。webpack提供了丰富的插件和配置选项，使得我们可以根据自己的需求对构建过程进行定制和优化。在构建大型项目时，合理的利用这些工具和策略可以显著提高构建效率。以上介绍的方法并非穷尽所有优化手段，针对具体项目还需根据实际情况和需求进行相应的调整和优化。众所周知，webpack为了方便各种资源和类型的加载，设计了loader加载器来读取资源。虽然所有的loader都以async的形式并发调用，但它们仍运行在单个node进程及同一个事件循环中。在需要读取多个loader文件资源时，如处理jsx和es6资源文件时，同步计算过程需要大量cpu运算。这时，node的单进程模型可能并不占优势。而happypack正是为了解决这个问题而诞生的。

让我们深入了解happypack如何优化webpack的加载过程。它通过扩展原有的loader执行过程，将单一进程模式转变为多进程模式。这一变革可以在不修改原有配置的基础上，完成对编译过程的优化。这意味着我们可以利用多核CPU的优势，并行处理多个任务，从而显著提高构建速度。

配置happypack相对简单。需要引入HappyPack和os模块，然后创建一个HappyThreadPool实例来管理线程池。在webpack的配置中，通过指定使用'happypack/loader'来替代原有的loader配置。还需要创建一个HappyPack的实例，并指定其id、缓存设置、线程池等。这样，当webpack处理文件时，就会将任务分配给多个子进程进行处理，从而利用多核CPU的优势加速编译过程。

除了利用多进程模式加速编译，happypack还开启了cache计算。这意味着在构建过程中，已经处理过的文件可以被缓存起来，下次构建时直接读取缓存，无需重新计算。这一特性可以进一步提高构建速度。经过优化，构建速度可以得到显著提升。

另一方面，当我们深入研究webpack的构建过程时，会发现在构建过程的某个阶段，特别是当uglifyJS进行压缩时，可能会出现一段时间的停滞。这是因为uglifyJS虽然是一个高效的压缩工具，但在处理大型项目时，其单线程压缩模式可能会成为性能瓶颈。为了解决这个问题，我们可以考虑增强uglifyJS的使用体验。其中，一种解决方案是使用webpack-uglify-parallel插件。这个插件采用多核并行压缩的方式，显著提升压缩速度。通过利用多核CPU的优势，该插件可以极大地提高uglifyJS的压缩效率。

使用插件进行数据处理的流程改进

在处理插件的过程中，我们发送特定的数据给插件进行处理。一旦插件开始处理这些数据，它会进入一个队列系统，等待处理完成。这个过程可以通过代码进行清晰的展示：

通过调用plugin.nextWorker().send方法发送数据给插件进行处理。然后增加插件队列的长度（plugin._queue_len++）。接着检查队列长度，如果为零，则触发回调。接下来，如果当前工作进程数量小于最大工作进程数，则创建一个新的子进程进行数据处理。这个子进程可以接收消息和错误事件，并将它们绑定到主进程的相应处理函数上。通过返回当前工作进程数组中的元素来准备下一个任务的处理。

接下来是关于配置优化的部分。在优化过程中，我们可以选择使用新的并行压缩插件UglifyJsParallelPlugin来替代原有的UglifyJsPlugin配置。该插件可以利用多核CPU进行代码压缩，以提高打包效率。它的使用方式非常直观简单，只需要引入相应的模块并进行相应的配置即可。我们还可以利用uglifyOptions选项进行详细的配置，以适应不同的项目需求。也推荐使用uglifyjs-webpack-plugin插件来进行代码压缩优化。它同样提供了丰富的配置选项，可以根据项目需求进行灵活配置。在实际的开发过程中，可以根据自身业务场景选择适合的优化手段。除了这些优化手段之外，我们还可以利用Tree-shaking和Scope Hoisting技术进行进一步的优化。这两种技术可以剔除项目中未引用的代码并将相关代码进行归纳整合，从而减少打包体积。使用这两种技术需要确保代码采用ES6模块编写并配置相应的Babel和Webpack配置。通过这些优化手段的实施，我们可以大大提高项目的构建效率和性能表现。在实际应用中，可以根据项目的具体需求和场景选择适合的优化手段进行实施。优化手段在开发环境与生产环境中的应用

在前端工程中，随着项目规模的扩大和复杂度的提升，性能优化变得至关重要。针对实际项目，持续改进构建工具的性能，不仅能提高项目开发效率，也能加深我们对工具的理解。本文将介绍几种常见的优化手段，并在开发环境和生产环境中其应用。

一、CommonsChunk

CommonsChunk 是一种将公共代码抽离出来的 webpack 插件，可以提高代码的复用率，减少重复代码，从而优化项目的构建速度。在开发环境和生产环境中，都可以使用 CommonsChunk 插件进行优化。

二、externals

Externals 是一种将某些模块排除在 webpack 构建过程之外的方式。通过配置 externals，可以避免将那些由其他方式处理的资源（如 CSS、第三方库等）打包进最终的文件中，从而提高构建速度。在生产环境中，使用 externals 可以帮助我们更好地控制最终的打包结果。

三、DllPlugin

DllPlugin 是 webpack 提供的一种预编译静态资源的方式。通过预编译一些不经常变动的静态资源，可以极大地提高构建速度。在生产环境中，使用 DllPlugin 可以帮助我们更快地构建项目。

四、Happypack

Happypack 是一种将 webpack 的构建过程并行化的插件。通过将任务分配给多个子进程并行处理，可以提高构建速度。在开发环境中，使用 Happypack 可以加速项目的构建过程。

五、uglify-parallel

uglify-parallel 是一种并行压缩 JavaScript 代码的工具。通过并行压缩代码，可以加快构建速度。在生产环境中，使用 uglify-parallel 可以帮助我们更快地生成压缩后的代码。

除了以上几种优化手段外，还有其他一些方法可以提高项目的构建速度，如优化 loader 配置、减少不必要的插件使用等。在实际项目中，我们可以根据项目的具体情况选择合适的优化手段，持续改进构建工具的性能。

本文中的所有例子已经重新优化，支持的webpack3特性。我们还为大家分享了ppt地址，可以在线查看更多关于性能优化的知识和技巧。希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

温馨提示：性能优化是前端工程中非常重要的一部分，我们需要不断地学习和新的优化手段，以提高项目的开发效率和性能。我们也要注重工具的使用和理解，才能更好地应对前端工程的挑战。