前端代码分割通过动态导入实现路由级按需加载，Webpack或Vite会将import()模块打包为独立chunk，结合React.lazy/Suspense或Vue Router的异步组件机制，在路由切换时动态加载对应代码，提升首屏性能。
前端代码分割通过按需加载路由对应的 JavaScript 模块，减少首屏加载体积，提升页面性能。实现动态加载的关键是结合现代打包工具（如 Webpack、Vite）的动态导入功能与前端框架的路由系统。
使用动态 import() 按路由拆分
JavaScript 的 import() 语法支持动态加载模块，打包工具会自动将这些模块拆分为独立的 chunk。
例如在 React Router 中：const Home = () => import('./pages/Home'); const About = () => import('./pages/About');
const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ];
Webpack 或 Vite 在构建时会把每个 import() 对应的页面打包成单独文件，访问对应路由时才加载。
在框架中集成异步路由
主流框架提供机制处理组件的异步加载，确保路由切换时自动拉取所需代码。
立即学习“Java免费学习笔记（深入）”；
React + React Loadable（或 Suspense）示例：const HomePage = React.lazy(() => import('./pages/Home')); const AboutPage = React.lazy(() => import('./pages/About'));
function App() {
return (
React.lazy 配合 Suspense 可优雅处理加载状态和错误边界。
Webpack 的魔法注释优化加载行为
通过魔法注释控制 chunk 的命名和预加载策略，提升用户体验。
const About = () => import( /* webpackChunkName: "about-page" */ /* webpackPrefetch: true */ './pages/About' );
- webpackChunkName：指定生成的 JS 文件名，便于维护
- webpackPrefetch：空闲时预加载该资源，加快后续跳转速度
Vue 中的动态路由加载
Vue Router 支持直接使用动态导入定义路由组件。
const routes = [ { path: '/', component: () => import('@/views/Home.vue') }, { path: '/about', component: () => import('@/views/About.vue') } ]
Vue CLI 或 Vite 构建时会自动进行代码分割，无需额外配置。
基本上就这些。只要路由配置中使用 import()，打包工具就会自动实现按需加载，关键在于正确设置路由和利用框架的懒加载能力。
