webpack 懒加载(Lazy Loading)

在前端开发中，懒加载是一种优化技术，它可以延迟加载页面中的某些资源或模块，以提高页面加载速度和性能。Webpack 提供了懒加载的功能，可以帮助我们在需要的时候再去加载模块，而不是一次性加载所有模块。

使用 import() 实现懒加载

Webpack 4 推荐使用动态 import() 函数来实现懒加载。通过动态 import，我们可以在需要的时候动态加载模块，而不是在页面加载时就加载所有模块。

// 懒加载模块
const lazyModule = () => import('./module');

// 在需要的时候调用懒加载模块
lazyModule().then(module => {
  // 使用加载的模块
});

在上面的代码中，我们定义了一个懒加载模块 lazyModule，当需要使用这个模块时，通过 import() 函数动态加载模块，并在 then 方法中处理加载的模块。

使用 Webpack 的 require.ensure 实现懒加载（已废弃）

在 Webpack 2 之前的版本，我们可以使用 require.ensure 方法来实现懒加载，但是在 Webpack 4 中已经被废弃，推荐使用动态 import() 函数。

// 懒加载模块
require.ensure([], function(require) {
  const module = require('./module');
}, 'lazyModule');

在上面的代码中，我们使用 require.ensure 方法来动态加载模块，第一个参数是依赖的模块数组，第二个参数是回调函数，在回调函数中处理加载的模块，第三个参数是模块的名称。

懒加载是一个很有用的优化技术，可以帮助我们减少初始加载时间，提高网页性能。在使用懒加载时，需要根据具体情况选择合适的方式来实现。