Webpack 性能优化实践详解-JavaScript中文网-JavaScript教程资源分享门户

前言

Webpack 是前端工程化中必不可少的构建工具，但是随着项目复杂度和规模的增加，Webpack 所需的构建时间也会随之增加，严重影响开发效率。因此，了解如何优化 Webpack 的性能，提升构建速度，是每个前端工程师必须掌握的技能。

本文将从以下四个方面介绍 Webpack 的性能优化技巧：

减少 Webpack 构建时间
如何使用 Webpack 的缓存机制
配置优化
代码优化

减少 Webpack 构建时间

Webpack 构建时间的优化从源代码的角度考虑，包括删除无用代码、减少依赖等方面。

删除无用的代码

在项目中，我们经常会有一些无用的代码或模块，这些代码或模块会被打包到资源文件中，导致资源文件变大，构建时间变长。因此，我们需要删除这些无用的代码和模块。

Webpack 通过 tree shaking 技术实现无用代码的删除，tree shaking 使用 ES6 的 import/export 语法，通过静态分析代码的引用关系，从而确定哪些代码是没有被引用的无用代码。

在你的代码中，你可以通过以下方式避免导出没有被使用的变量。

// 变量导出
export const a = 1;

// 函数导出
export function add(a, b){ return a + b; }

// 类的导出
export class Test{};

同时，在项目中使用 import {var} from 'module' 的方式引用模块时，Webapck 会自动删除没有被使用到的 module。

例如：

// 没有使用 c、d 模块
import {a,b} from 'module';

减少依赖

减少依赖同样能够有效减少 Webpack 的构建时间。我们可以通过以下方式减少依赖：

删除我们现在并不需要的依赖，遵循“不用则删”的原则。
使用按需加载。

按需加载（或称懒加载）是指在需要使用某些模块时再进行加载，这样可以减少页面初次加载时的请求，避免加载不必要的模块，从而提升页面的使用体验。

如何使用 Webpack 的缓存机制

Webpack 的缓存机制是指 Webpack 在上一次构建后，将构建结果缓存下来，在下一次构建时，如果输入内容（Entry）和 Webpack 配置都没有发生变化，Webpack 会快速地使用之前的缓存结果，从而避免重新构建，提升构建速度。

在 Webpack 中，使用 cache-loader 或者 hard-source-webpack-plugin 插件，都可以实现缓存机制。

cache-loader

cache-loader 是一个缓存插件，它会将经过该插件的模块构建后的结果缓存到磁盘中。当下一次构建时，该模块相同的输入内容就可以从缓存中读取，从而提升构建速度。

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- --------
        ---- -
          ---------------
          --------------
        --
        -------- --------------
      -
    -
  -
--

hard-source-webpack-plugin

hard-source-webpack-plugin 也是一个非常好用的缓存插件，它会将上一次构建的结果缓存到内存中，从而避免 IO 操作带来的性能损失。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

不过 HardSourceWebpackPlugin 在构建不同的项目之间，由于缓存存在内存中，所以需要手动清楚缓存。

配置优化

Webpack 的配置优化主要是针对 Webpack 所需的资源（如样式、图片等）进行优化，从而降低 Webpack 的构建时间。

对资源进行压缩

Webpack 在打包过程中，会产生一些资源文件，如 CSS、JS、图片等。为了加快资源加载速度，我们需要对这些资源进行压缩，从而减小资源文件的大小。

-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
  ------------- -
    ---------- -
      --- ----------------
        ------ -----
        --------- -----
        ---------- ----
      --
    -
  -
--

处理图片资源

和样式表一样，Webpack 打包图片时也会产生一些冗余代码，会对页面加载速度和性能造成一定的影响。为了优化这个问题，我们需要对图片资源进行处理，主要有两个方法。

将小图片转换为 Data URL，减少 HTTP 请求，提高加载速度。

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- -------------------
        ---- -
          -
            ------- -------------
            -------- -
              ------ ---- -- -- ----- ------
            -
          -
        -
      -
    -
  -
--

对大图片进行压缩处理，减小图片的文件大小。

const ImageminWebpWebpackPlugin= require('imagemin-webp-webpack-plugin');
  module.exports = {
    plugins: [
      new ImageminWebpWebpackPlugin()
    ]
};

代码优化

开发时，我们应该注意代码的简洁和可复用性。在 Webpack 配置中，我们可以通过以下两种方式进一步优化代码。

使用 ProvidePlugin 引用全局依赖

在 Webpack 中，对于一些全局的依赖，比如 React、jQuery 等，我们可以使用 ProvidePlugin 引入它们，以避免在代码中重复引用，同时减少整体代码的体积。

-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
  -------- -
    --- -----------------------
      ------ --------
      -- --------
    --
  -
--

使用 SplitChunksPlugin 进行代码分离

代码分离是指将代码按照逻辑划分到不同的文件中，从而减少每个文件的大小，提升加载速度。

使用 SplitChunksPlugin 插件，可以将公共代码或者引用次数较多的代码块单独打包成一个文件，在引用时只需加载一次。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

结束语

本文从如何减少 Webpack 构建时间、使用 Webpack 的缓存机制、配置优化和代码优化四个方面，分享了 Webpack 性能优化的实践方案。希望本文能够对你的 Webpack 构建速度有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67824a57935627c90000a7f7

Webpack 性能优化实践详解

前言