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 缓存。

配合路由做页面级懒加载

在单页应用中，最常见的是路由组件懒加载：

立即学习“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，其他用户完全不加载它。

标签： vue react javascript java js vite 浏览器 工具 懒加载 ai 路由 vue route