前端开发中，页面需要加载大量的资源文件，尤其是 JavaScript 文件，这些文件可能包含了很多没有用到的代码，如果在页面加载的时候一次性将所有 JavaScript 文件都加载了进来，会对网页性能产生很大的影响。而按需加载可以大大加快页面的加载速度，提高用户体验。
在前端开发中，Webpack 是一个非常常用的打包工具，也是实现按需加载功能的利器。下面我们就来详细介绍如何使用 Webpack 实现按需加载。
1. 使用 import() 动态引入
从 webpack 2.0 开始，就可以使用 import() 函数来实现动态导入。
import() 函数的用法和 import 语句相同，接受一个模块名称作为参数。使用 import() 导入的模块会被自动分割成一个单独的代码块，拥有它自己的上下文环境和依赖关系。
示例代码如下：
function loadComponent() { return import('./component.js') } loadComponent().then(component => { document.body.appendChild(component) })
上面的代码使用了动态导入方式加载了一个 component.js 组件。
2. 使用 require.context
require.context 方法允许在运行时进行模块的动态导入。使用 require.context 可以在一个文件夹内，通过正则匹配求出这个文件夹内的所有模块的路径。
示例代码如下：
function importAll (r) { r.keys().forEach(r) } importAll(require.context('./components/', true, /\.js$/))
上面的代码使用了 require.context 动态导入了 ./components/ 文件夹下所有以 .js 结尾的模块。
3. 配置 webpack
Webpack 提供了许多插件和配置项来帮助我们实现按需加载，下面是一些常用的配置项：
3.1 optimization.splitChunks
optimization.splitChunks 可以用来配置代码块的拆分规则，可以将公共代码块单独打包成一个文件，避免重复打包。
optimization: { splitChunks: { chunks: 'all' } }
3.2 webpack.DllPlugin
在大型项目中，你可能会发现有些库是不会改变的，但是每次打包都会被重新加载，这样会浪费很多时间。利用 webpack.DllPlugin 插件，我们可以先将这些不会改变的库抽出来单独打包成一个文件，以后只需要在启动时引入这个文件即可。
配置步骤：
- 首先，在
webpack.config.js中配置一个 DllPlugin 插件。
new webpack.DllPlugin({ path: 'manifest.json', name: '[name]_library' })
然后，运行
webpack --config webpack.dll.config.js --mode production命令，生成一个manifest.json文件和一个example_library.dll.js文件。最后，在
webpack.config.js中配置：
-- -------------------- ---- ------- -------------- - - -------- - --- ---------------------------- -------- ---------- --------- --------------------------- --- -- -- --- -展开代码
上面的代码中，DllReferencePlugin 插件会将之前生成的 manifest.json 文件引入到项目中，context 是上下文，manifest 则是 DllPlugin 插件创建的 json 文件。
3.3 code splitting 和 lazy loading
Webpack 提供了很多方式来实现按需加载，例如 require.ensure()、System.import() 等等。
示例代码：
-- -------------------- ---- ------- ----- ------ - --------------------------------- ---------------- - ------ ---- -------------- - ----- -- - ---------------- ---------- -- - -------------- -- -展开代码
上面的代码中，当用户点击按钮时会通过动态 import() 加载 lazy.js 模块。
结语
以上就是如何使用 Webpack 实现按需加载的实现方式和配置方法，可以根据项目需要选择合适的方式来实现按需加载，提高应用性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc2502a231b2b7edd8fe5a
