首先在打包的时候使用 splitwebpackplugin 进行分割
在实际引用中,webpack 实现模块的懒加载是通过动态导入(dynamic import )来实现的。动态导入是 es6 的一项功能,允许在运行时异步加载模块,从而实现按需加载。
-
使用动态 import(),再需要懒加载的地方,使用 js 中的动态 import函数实现动态加载
1.javascriptimport('./module).then(module => { // })
router 中文件很常用
-
webpack 打包:在webpack 打包时,它会识别动态 import() 并将处理为单独的chunk, 这个 chunk 会被单独生成,不会被包含在初始的打包文件中
-
按需加载:当页面运行时,当需要加载懒加载模块时,浏览器会发送一个异步请求去加载对应的 chunk,加载完成后,模块就可以被使用了。
动态导入默认不 tree-shaking
- webpack 静态分析代码的引用关系,识别出未被引用的模块和代码,然后将其剔除
- 在动态导入的模块中只导出需要被使用的变量、函数或类,而不是导出整个模块的内容。【splitWebpackPlugin的功能】
- ESM 是静态语法,这意味着在解析阶段(静态分析阶段)就能确定模块的依赖关系和导出内容,而不需要在运行时进行解析。
- 但是ESM(ECMAScript Modules)并不支持动态导入的依赖关系的静态分析。动态导入的路径必须是字符串字面量,不能是变量或者表达式,因此无法在静态分析阶段确定其依赖关系。动态导入是通过在运行时才能决定加载哪些模块的一种机制,与静态导入相比,它更加灵活,但也造成了一些不同的限制。需要注意的是,虽然动态导入的依赖关系无法在静态分析阶段确定,但是一旦模块被动态加载,它的依赖关系会被动态分析,并且加载相应的模块。这种动态加载的方式使得模块的依赖关系更加灵活,但也增加了代码的复杂性。