webpack 如何实现模块懒加载

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

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

1. 使用动态 import()，再需要懒加载的地方，使用 js 中的动态 import函数实现动态加载

   1. import('./module).then(module => {
          //
      })
      

      router 中文件很常用

2. webpack 打包：在webpack 打包时，它会识别动态 import() 并将处理为单独的chunk, 这个 chunk 会被单独生成，不会被包含在初始的打包文件中

3. 按需加载：当页面运行时，当需要加载懒加载模块时，浏览器会发送一个异步请求去加载对应的 chunk，加载完成后，模块就可以被使用了。

动态导入默认不 tree-shaking

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