使用 Webpack 进行代码优化的 16 个技巧-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个前端打包工具，可将多个 JavaScript 文件打包为单个文件。使用 Webpack 进行代码优化可以提高页面加载速度，减少 HTTP 请求次数，降低页面大小。以下是使用 Webpack 进行代码优化的 16 个技巧。

1. 使用 Webpack Bundle Analyzer 插件

使用 Webpack Bundle Analyzer 插件可以可视化 Webpack 打包的结果，帮助开发者找出文件大小、模块依赖等问题。

需要安装插件：

npm install --save-dev webpack-bundle-analyzer

使用如下配置启动 Webpack：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  //...
  plugins: [new BundleAnalyzerPlugin()]
};

2. 压缩代码

使用 Webpack 的 UglifyJS 插件可以将 JavaScript 代码压缩，减少文件大小。

需要安装插件：

npm install --save-dev uglifyjs-webpack-plugin

使用如下配置启动 Webpack：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  //...
  plugins: [new UglifyJSPlugin()]
};

3. 使用 Scope Hoisting

Webpack 2 之后引入了 Scope Hoisting 技术，可以将模块间的依赖关系简化为一些变量。

module.exports = {
  //...
  plugins: [new webpack.optimize.ModuleConcatenationPlugin()]
};

4. 使用 Tree Shaking

Tree Shaking 技术通过静态分析移除无用代码，减少文件大小。

需要在配置文件中开启 optimization，并将 sideEffects 设置为 false，表示所有代码都是纯函数，没有副作用。

module.exports = {
  //...
  optimization: {
    usedExports: true,
    sideEffects: false
  }
};

5. 按需加载

Webpack 可以将模块拆分为单独的文件，按需加载，减少页面加载时间。需要使用 import() 语句来实现动态加载。

import('./xxx').then((module) => {
  //...
});

6. 预加载

使用 webpackPrefetch 可以在主资源加载完成后预加载相关资源，加快页面加载速度。

import(/* webpackPrefetch: true */ './xxx').then((module) => {
  //...
});

7. 开启 Gzip 压缩

可以在 Web 服务器上启用 Gzip 压缩，减少网络传输的数据量。需要在 Webpack 中设置 compression。

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  //...
  plugins: [new CompressionPlugin()]
};

8. Inline Small Assets

可以将较小的资源内联到 HTML 或 CSS 文件中，减少 HTTP 请求次数。

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

9. 使用 NamedModulesPlugin

NamedModulesPlugin 可以在开发环境中向控制台输出有改动的模块名称。

module.exports = {
  //...
  plugins: [new webpack.NamedModulesPlugin()]
};

10. 使用 HashedModuleIdsPlugin

HashedModuleIdsPlugin 可以在生产环境中向应用程序添加短哈希值，以便更好地处理缓存机制。

module.exports = {
  //...
  plugins: [new webpack.HashedModuleIdsPlugin()]
};

11. 使用 DllPlugin 和 DllReferencePlugin

DllPlugin 和 DllReferencePlugin 可以将开发和生产之间的公共代码提取为单独的 DLL，加快构建和减小打包文件。

需要先创建一个 webpack.config.dll.js 文件：

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

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

然后启动 Webpack，得到生成的 vendor.dll.js 和 vendor.manifest.json 文件。

接下来在原来的 Webpack 配置文件中添加 DllReferencePlugin：

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

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

12. 使用 ParallelUglifyPlugin

ParallelUglifyPlugin 可以使用多个进程并行压缩代码，提高压缩速度。

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

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

13. 拆分第三方库

将第三方库拆分为单独的包可以提高构建速度，缩小打包文件。

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

14. 使用 babel-loader 缓存

将 babel 编译器的缓存设置为 true，可以加速编译过程。

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

15. 使用 IgnorePlugin

使用 IgnorePlugin 可以忽略某些文件，加快编译速度。

module.exports = {
  //...
  plugins: [new webpack.IgnorePlugin(/\.\/locale/)]
};

16. 使用 HardSourceWebpackPlugin

HardSourceWebpackPlugin 可以在文件系统中缓存编译后的代码和构建中间文件，以避免重新编译（特别是在多次启动后）而导致的大量静态资源和昂贵的跨系统文件系统操作。

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  //...
  plugins: [new HardSourceWebpackPlugin()]
};

总结：

使用 Webpack 进行代码优化可以显著提高页面加载速度，减少 HTTP 请求次数，降低页面大小。本文介绍了 16 个使用 Webpack 进行代码优化的技巧，每个技巧都具有指导意义和深度，同时包含了示例代码。希望能够帮助到正在使用 Webpack 的开发者。

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