Webpack 构建优化实战，按需加载篇-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，Webpack 是一个不可或缺的工具。它可以将多个模块合并成一个文件，从而提高 Web 应用的性能。但是在开发大型 Web 应用时，由于项目代码量较大，构建时间也会相应地增加。本文将介绍一些 Webpack 构建优化技巧，特别是按需加载的优化，以便缩短构建时间，提高开发效率。

按需加载的意义

按需加载（Code Splitting）是指将应用程序分割成小块，只在需要时加载这些小块。这样可以缩短应用程序的启动时间，提高用户的体验。在 Webpack 中，可以通过动态导入实现按需加载。通过这种方式，Webpack 可以将代码分割成多个 bundle 文件，只有在需要时才会加载这些文件。这一优化方式的重点在于响应时机准确，只有在需要时再进行资源加载，减少了不必要的网络传输，提高了加载速度。

按需加载配置

Webpack 支持多种方式实现按需加载，下面将介绍三种主要的方式。

动态导入

动态导入是一种默认的按需加载方式。在代码中使用 import() 函数，Webpack 会自动将该模块包装到独立的 chunk 中，并按需加载。下面是一个示例：

import('lodash').then(_ => {
  console.log(_.join(['Hello', 'webpack'], ' '));
});

Webpack 会将 lodash 分割成一个单独的文件，并在需要时异步加载。

预先加载模块

预先加载模块是指在应用程序启动时，立即加载某些组件，以加快应用程序的启动时间。预先加载模块可以使用 require.ensure 或 import 函数，并将 webpackPrefetch 设置为 true，示例如下：

require.ensure([], function(require) {
  var modal = require('./modal');
  modal.show();
}, 'modal');

或

import(/* webpackPrefetch: true */ 'LoginModal').then(LoginModal => {
  const loginModal = new LoginModal()
  loginModal.show()
})

webpackPrefetch 告诉 Webpack 该组件可能需要在将来的某个时间加载。Webpack 将此信息添加到 <link> 标签的 prefetch 属性中，这样浏览器会请求并缓存此文件。当需要加载该组件时，浏览器可以直接从缓存中拿取。

使用 require.ensure 和 require.include

require.ensure 是使用 Webpack 提供的特殊 API，可以将代码分割成多个 chunk 文件。在代码中使用 require.ensure，可以将代码分割成多个模块，只有在需要时才会加载。下面是一个示例：

require.ensure(['./moduleA'], function(require) {
  var moduleA = require('./moduleA');
  moduleA.show();
});

require.include 可以将模块打包到每个 chunk 中，代码示例如下：

if (isShow) {
  require.include('./moduleA');
}

按需加载的具体实现

通过以上介绍的三种方式，可以实现按需加载。下面将介绍如何配置 Webpack，实现按需加载。

配置 entry

首先需要在 Webpack 的配置文件中，将应用程序划分为多个 entry。如下：

entry: {
  main: ['babel-polyfill', './src/main.js'],
  login: ['babel-polyfill', './src/login.js'],
  home: ['babel-polyfill', './src/home.js'],
  vendors: ['babel-polyfill', 'vue', 'vue-router']
},

因为每个 entry 对应着一个页面，所以不同页面的 JS 路径也是不一样的。当打包某个页面时，Webpack 会对该页面的 JS 和资源进行打包，其他页面的资源不会打包进来。

配置 output

由于每个 entry 会生成不同的 bundle，因此需要将生成的 bundle 放到不同的目录中，以避免照成混乱。可以通过 output 属性来实现，例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash].js',
  publicPath: '/'
},

其中 [name] 会自动替换成 entry 中的名称。

配置代码分割

Webpack 4 默认开启了 SplitChunksPlugin，所以可以根据需要修改该插件的相关参数来进行代码分割优化。

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

以上配置中，splitChunks 控制代码分割的行为，cacheGroups 控制分割后代码的缓存行为。其中，test 用于决定哪些模块被打包成公共代码，name 决定文件名，priority 决定打包的顺序。优先级值越大，分割出来的块越大。默认的优先级为负数，这是为了避免与第三方库冲突。chunks 用于决定应用哪些块进行分割。可选参数有 all，async 和 initial。默认值是 async，它可以将动态导入的模块分割成新的 chunk 文件。minChunks 和 minSize 控制代码分割后的最小大小和最小公共模块数。

总结

按需加载是一种重要的性能优化手段，可以加快页面加载速度，提升用户体验。本文介绍了 Webpack 实现按需加载的三种方法，以及具体实现时的 Webpack 配置。在实际项目开发中，需要根据具体情况进行配置和优化，以便针对项目实现最优化和高效的代码加载和构建优化。

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