JavaScript代码拆分与懒加载核心是动态import()，实现按需加载、减小首屏体积；支持路由级、交互级加载及prefetch/preload优化，现代构建工具原生支持。
JavaScript 的代码拆分与懒加载，核心是用 动态 import() 实现按需加载模块，减少首屏体积、提升加载性能。
用 dynamic import() 拆分代码
把原本静态的 import 改成函数式调用，让模块在运行时才加载：
静态导入（打包时合并进主包）：import { utils } from './utils.js' 动态导入（生成独立 chunk，按需下载）：const { utils } = await import('./utils.js')
Webpack、Vite、Rollup 等构建工具会自动识别 import() 并拆出新 chunk，文件名通常带 hash，支持 HTTP 缓存。
配合路由做页面级懒加载
在单页应用中，最常见的是路由组件懒加载：
立即学习“Java免费学习笔记（深入）”；
React（配合 Suspense）：const Home = React.lazy(() => import('./pages/Home')) Vue Router：{ path: '/about', component: () => import('./views/About.vue') } 原生 JS 路由示例：if (path === '/admin') { const Admin = await import('./admin.js'); Admin.init(); }
这样访问 /admin 时才拉取 admin.js，其他用户完全不加载它。
条件触发或交互动态加载
不是所有模块都要等路由跳转，也可以在按钮点击、滚动进入视口、表单提交后加载：
点击弹窗时加载编辑器：button.addEventListener('click', async () => { const Editor = await import('./editor.js'); new Editor().show(); }); 图片懒加载 + 组件联动：if (observer.isIntersecting) { await import('./Lightbox.js'); }
注意：避免在循环或高频事件（如 scroll）中直接调用 import()，可加节流或只触发一次。
预加载与 prefetch 优化体验
动态 import 后可以主动提示浏览器提前加载非紧急资源：
import('./analytics.js').then(...) 是普通异步加载 import('./analytics.js').then(...); import('./analytics.js').webpackPrefetch = true;（Webpack） Vite 中可用 import('./module.js').then(...).catch(...); // vite:preload 注释触发预加载
prefetch 是空闲时低优先级下载，preload 是高优先级提前加载，按场景选择。
基本上就这些。不需要额外库，现代浏览器和主流构建工具都原生支持，关键是把“哪些代码不用一开始就加载”想清楚。
以上就是Javascript如何进行代码拆分与懒加载？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543416.html
微信扫一扫 
支付宝扫一扫 
