Webpack 中文文档 目录

webpack 懒加载(Lazy Loading)

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

使用 import() 实现懒加载

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

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

使用 Webpack 的 require.ensure 实现懒加载(已废弃)

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

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

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


上一篇:webpack 代码拆分(Code Splitting)
下一篇:webpack 缓存(Caching)
纠错
反馈