Javascript如何进行代码拆分与懒加载？
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 缓存。
配合路由做页面级懒加载
在单页应用中，最常见的是路由组件懒加载：
- 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.addEve
ntListener('click', async () => { const Editor = await import('./editor.js'); new Editor().show(); }); - 图片懒加载 + 组件联动：
if (observer.isIntersecting) { await import('./Lightbox.js'); }
ntListener('click', async () => { const Editor = await import('./editor.js'); new Editor().show(); });注意：避免在循环或高频事件（如 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 是高优先级提前加载，按场景选择。
基本上就这些。不需要额外库，现代浏览器和主流构建工具都原生支持，关键是把“哪些代码不用一开始就加载”想清楚。
