webpack 如何实现模块懒加载

最新推荐文章于 2024-05-27 06:21:30 发布

我有一棵树

最新推荐文章于 2024-05-27 06:21:30 发布

阅读量1k

点赞数 14

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_17335549/article/details/136300265

版权

文章介绍了如何在Webpack中使用splitwebpackplugin进行模块分割，并重点讲解了动态导入(dynamicimport)实现懒加载的原理。同时提到了动态导入导致的tree-shaking缺失，以及ESM的静态分析与动态导入的灵活性之间的对比。

摘要由CSDN通过智能技术生成

首先在打包的时候使用 splitwebpackplugin 进行分割

在实际引用中，webpack 实现模块的懒加载是通过动态导入（dynamic import ）来实现的。动态导入是 es6 的一项功能，允许在运行时异步加载模块，从而实现按需加载。

使用动态 import()，再需要懒加载的地方，使用 js 中的动态 import函数实现动态加载
1. ```
import('./module).then(module => {
    //
})
```
  router 中文件很常用
webpack 打包：在webpack 打包时，它会识别动态 import() 并将处理为单独的chunk, 这个 chunk 会被单独生成，不会被包含在初始的打包文件中
按需加载：当页面运行时，当需要加载懒加载模块时，浏览器会发送一个异步请求去加载对应的 chunk，加载完成后，模块就可以被使用了。

webpack 静态分析代码的引用关系，识别出未被引用的模块和代码，然后将其剔除
在动态导入的模块中只导出需要被使用的变量、函数或类，而不是导出整个模块的内容。【splitWebpackPlugin的功能】
ESM 是静态语法，这意味着在解析阶段（静态分析阶段）就能确定模块的依赖关系和导出内容，而不需要在运行时进行解析。
但是ESM（ECMAScript Modules）并不支持动态导入的依赖关系的静态分析。动态导入的路径必须是字符串字面量，不能是变量或者表达式，因此无法在静态分析阶段确定其依赖关系。动态导入是通过在运行时才能决定加载哪些模块的一种机制，与静态导入相比，它更加灵活，但也造成了一些不同的限制。需要注意的是，虽然动态导入的依赖关系无法在静态分析阶段确定，但是一旦模块被动态加载，它的依赖关系会被动态分析，并且加载相应的模块。这种动态加载的方式使得模块的依赖关系更加灵活，但也增加了代码的复杂性。

关注