前端开发中，Webpack 是一个不可或缺的工具。它可以将多个模块合并成一个文件，从而提高 Web 应用的性能。但是在开发大型 Web 应用时，由于项目代码量较大，构建时间也会相应地增加。本文将介绍一些 Webpack 构建优化技巧，特别是按需加载的优化，以便缩短构建时间，提高开发效率。
按需加载的意义
按需加载（Code Splitting）是指将应用程序分割成小块，只在需要时加载这些小块。这样可以缩短应用程序的启动时间，提高用户的体验。在 Webpack 中，可以通过动态导入实现按需加载。通过这种方式，Webpack 可以将代码分割成多个 bundle 文件，只有在需要时才会加载这些文件。这一优化方式的重点在于响应时机准确，只有在需要时再进行资源加载，减少了不必要的网络传输，提高了加载速度。
按需加载配置
Webpack 支持多种方式实现按需加载，下面将介绍三种主要的方式。
动态导入
动态导入是一种默认的按需加载方式。在代码中使用 import() 函数，Webpack 会自动将该模块包装到独立的 chunk 中，并按需加载。下面是一个示例：
----------------------- -- - ---------------------------- ----------- - ---- ---
Webpack 会将 lodash 分割成一个单独的文件，并在需要时异步加载。
预先加载模块
预先加载模块是指在应用程序启动时，立即加载某些组件，以加快应用程序的启动时间。预先加载模块可以使用 require.ensure 或 import 函数，并将 webpackPrefetch 设置为 true，示例如下：
------------------ ----------------- - --- ----- - ------------------- ------------- -- ---------
或
--------- ---------------- ---- -- ----------------------------- -- - ----- ---------- - --- ------------ ----------------- --
webpackPrefetch 告诉 Webpack 该组件可能需要在将来的某个时间加载。Webpack 将此信息添加到 <link> 标签的 prefetch 属性中，这样浏览器会请求并缓存此文件。当需要加载该组件时，浏览器可以直接从缓存中拿取。
使用 require.ensure 和 require.include
require.ensure 是使用 Webpack 提供的特殊 API，可以将代码分割成多个 chunk 文件。在代码中使用 require.ensure，可以将代码分割成多个模块，只有在需要时才会加载。下面是一个示例：
----------------------------- ----------------- - --- ------- - --------------------- --------------- ---
require.include 可以将模块打包到每个 chunk 中，代码示例如下：
-- -------- - ----------------------------- -
按需加载的具体实现
通过以上介绍的三种方式，可以实现按需加载。下面将介绍如何配置 Webpack，实现按需加载。
配置 entry
首先需要在 Webpack 的配置文件中，将应用程序划分为多个 entry。如下：
------ - ----- ------------------ ----------------- ------ ------------------ ------------------ ----- ------------------ ----------------- -------- ------------------ ------ ------------- --
因为每个 entry 对应着一个页面，所以不同页面的 JS 路径也是不一样的。当打包某个页面时，Webpack 会对该页面的 JS 和资源进行打包，其他页面的资源不会打包进来。
配置 output
由于每个 entry 会生成不同的 bundle，因此需要将生成的 bundle 放到不同的目录中，以避免照成混乱。可以通过 output 属性来实现，例如：
------- - ----- ----------------------- -------- --------- ------------------- ----------- --- --
其中 [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