Webpack 如何优化打包模块数量？-JavaScript中文网-JavaScript教程资源分享门户

介绍

Webpack 是一个流行的前端打包工具，它能帮助我们把多个 JavaScript 模块打包成一个或多个 bundles，然后在浏览器中加载执行。在实际项目中，Webpack 打包的速度和体积往往成为开发者关注的重点之一。本文将介绍一些优化 Webpack 打包模块数量的方法。

优化方法

1. 减少入口文件数量

Webpack 通过入口文件来构建依赖关系图，然后把图中的所有模块打包到输出文件中。因此，减少入口文件数量可以减少打包模块数量，从而提高打包速度和降低包体积。

具体地，我们可以通过以下几种方式减少入口文件数量：

合并多个入口文件成一个。
剔除不必要的入口文件。
通过ChunkSplit来将入口文件拆分成多个 chunks。

以下是一个多入口文件打包的例子。

module.exports = {
entry: {
    app: './app.js',
    login: './login.js'
},
output: {
    filename: '[name].bundle.js',
},

我们可以将两个入口文件合并成一个，来减少打包模块数量：

module.exports = {
entry: {
    main: ['./app.js', './login.js']
},
output: {
    filename: 'main.bundle.js',
},

2. 配置 Tree Shaking

Tree Shaking 可以消除无用的代码，也可以减少打包模块数量，提高代码效率。我们需要在 Webpack 配置文件中添加两个选项：optimization.usedExports 和 optimization.sideEffects。

optimization.usedExports: 只导出在代码中被使用过的代码，剔除未使用代码。

optimization.sideEffects: 排除包含副作用（如对象实例上的副作用，与浏览器交互）的模块。

以下是一个配置 Tree Shaking 的例子。

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

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

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

3. 使用 `splitChunks`

使用 splitChunks 可以将模块分离成单独的 chunks。Webpack 4 默认开启了 commonsChunkPlugin，可以通过 optimization.splitChunks 的配置来进行更加细致的控制。

以下是一个通过配置 splitChunks 分离 Vendor 的例子。

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

4. 动态加载

动态加载可以在某些情况下减少打包模块数量，从而提高性能。Webpack 为我们提供了两种方式实现动态加载：import() 和 require.ensure()。

以下是一个动态加载的例子。

import('./math').then(math => {
  console.log(math.add(16, 26));
});

5. 开启 Scope Hoisting

Scope Hoisting 可以将模块之间的函数调用关系静态化，减少代码中的函数声明次数并尽量让代码在浏览器中运行。Scope Hoisting 在 Webpack 3 中已经被默认启用，可以通过配置文件中的 moduleConcatenation 属性进行开启。

以下是一个开启 Scope Hoisting 的例子。

module.exports = {
  mode: 'production',
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],
};

总结

优化 Webpack 打包模块数量是前端工程师不可避免的问题之一。在实际项目中，我们需要根据不同的业务需求选择不同的优化方法。通过减少入口文件数量、配置 Tree Shaking、使用 splitChunks、动态加载和开启 Scope Hoisting 五个方面的优化，我们可以缩短 Webpack 打包时间、降低包体积、提高代码效率。

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

Webpack 如何优化打包模块数量？

介绍