webpack 如何实现模块懒加载

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

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

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

    javascript 复制代码
    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)并不支持动态导入的依赖关系的静态分析。动态导入的路径必须是字符串字面量,不能是变量或者表达式,因此无法在静态分析阶段确定其依赖关系。动态导入是通过在运行时才能决定加载哪些模块的一种机制,与静态导入相比,它更加灵活,但也造成了一些不同的限制。需要注意的是,虽然动态导入的依赖关系无法在静态分析阶段确定,但是一旦模块被动态加载,它的依赖关系会被动态分析,并且加载相应的模块。这种动态加载的方式使得模块的依赖关系更加灵活,但也增加了代码的复杂性。
相关推荐
祝余呀4 分钟前
HTML初学者第三天
前端·html
就爱瞎逛20 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81624 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者38 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
企鹅侠客41 分钟前
实践篇:14-构建 Node.js 应用程序镜像
docker·node.js·dockerfile
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app