Webpack是一个流行的前端打包工具，可以将各种资源（例如JS、CSS和图片等）打包成网页中的几个文件。当我们需要实现按需加载和异步加载时，就需要使用Webpack中的import()、require.ensure()和require.ensure方法。本文将详细介绍这三种方式的使用及其指导意义。
import()
ES6的模块规范中提供了import()函数，可以在需要使用时加载模块。Webpack支持这种方式，并将它转换成动态import()。在Webpack 2.4.0之后，可以用它来实现代码分割（Code Splitting）。具体使用方法如下：
import("./module").then((module) => {
// 使用module
}).catch((err) => {
// 处理加载出错的情况
})上述代码中的"./module"为需要加载的模块路径，返回的module对象中包含了该模块的导出内容。当需要加载的模块较多时，我们可以将它们放在一个数组中，然后通过Promise.all()方法全部加载完成后再执行相关操作。另外，使用async/await语法糖可以更加方便地管理异步操作。
使用import()可以实现异步加载，从而实现按需加载，降低了网页的加载时间和占用资源。
require.ensure()
Webpack 1.x中使用如下语句引入require.ensure方法：
require.ensure(["./module1", "./module2"], function(require) {
var mod1 = require("./module1");
var mod2 = require("./module2");
// 使用mod1和mod2
});在Webpack 2.x中，require.ensure方法已被移除，可以使用import()方法代替。当然，如果你需要兼容旧版本的Webpack，可以使用webpack-require-ensure-plugin来实现require.ensure的功能。
require.ensure的作用是将一组模块打包成一个chunk，并异步加载。将需要打包在一起的模块路径放在第一个参数中，回调函数中传入require方法。当该chunk需要异步加载时，Webpack会按需加载这个chunk，然后才会执行相应的回调函数。
require.ensure的使用
我们来看一个使用require.ensure的例子。假设有三个页面PageA、PageB和PageC，它们有一些相同的业务逻辑。我们将这个逻辑提取出来，放在一个公共模块CommonModule中，然后在每个页面中使用该模块。为了不影响页面的加载速度，我们可以将CommonModule单独打包成一个chunk，并在需要时异步加载。具体使用方法如下：
require.ensure([], function(require) {
var CommonModule = require("./CommonModule");
// 使用CommonModule
}, "CommonModule");上述代码中，第一个参数是需要打包的模块路径，这里我们将CommonModule打包成一个chunk。第三个参数是指定chunk的名字，名称相同的chunk会被合并，从而减少HTTP请求的次数。当CommonModule需要异步加载时，Webpack会按需加载该chunk，并执行回调函数。
需要注意的是，require.ensure的第一个参数必须是数组，其中每个元素都是一个需要打包的模块路径。如果有多个数组元素，Webpack会将它们打包成一个chunk。如果没有任何数组元素，Webpack会创建一个新的chunk，并将回调函数中的所有代码打包进去。在实际使用中，我们可以将不同页面的公共代码打包成一个chunk，将第三方库打包成一个chunk，将应用程序的逻辑打包成一个chunk等等。
总结
本文介绍了Webpack中的import()、require.ensure()和require.ensure方法，并给出了相关的示例代码。使用这些方法可以实现异步加载和按需加载，并有效地降低网页的加载时间和占用资源。当网页中有大量代码需加载时，这些方法能够帮助我们更好地管理代码，并使网页具有更好的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9f6c6add4f0e0ff28221d