代码分割是将JavaScript文件拆分为多个小块以按需加载的技术。通过动态导入import()实现懒加载，减少初始负载，提升页面响应速度。构建工具如Webpack、Vite等支持自动分块。常见应用于路由级懒加载，如React中结合lazy与Suspense实现组件延迟加载并显示占位内容。还可使用webpackPreload或webpackPrefetch优化后续资源加载时机。合理控制拆分粒度，平衡请求量与性能收益，是提升用户体验的关键。
在现代
前端
开发中，JavaScript 代码分割是提升页面加载性能的重要手段。随着应用体积不断增大，一次性加载全部脚本会导致首屏延迟、用户体验下降。通过动态导入和懒加载，我们可以按需加载模块，减少初始负载，加快页面响应速度。
什么是代码分割？
代码分割（Code Splitting）是指将打包后的 JavaScript 文件拆分成多个小块（chunk），让
浏览器
只在需要时加载对应的代码块。这不同于传统的打包方式——把所有代码合并成一个大文件。
Webpack、Vite、Rollup 等构建工具都原生支持代码分割。开发者无需手动拆分文件，只需使用特定语法引导构建系统生成分块。
动态导入：import() 的使用
动态导入是实现代码分割的核心机制。它使用
import(path)
函数形式，在运行时异步加载模块，返回一个 Promise。
立即学习
“
Java免费学习笔记（深入）
”；
示例：按需加载工具函数
当用户点击按钮时，
largeModule.js
才会发起网络请求并执行。这种方式适用于功能级模块的延迟加载，比如图表渲染、模态框组件或第三方库。
结合
路由
实现懒加载
在单页应用（SPA）中，最常见的代码分割场景是路由级别的懒加载。每个页面组件独立成块，访问对应路径时才加载。
Midjourney AI 提示词工具
PHP中文网提供Midjourney AI 提示词在线生成工具，专为解决 AI 绘画“词穷”痛点而生，用户只需输入“一只猫”等简单想法，工具便能利用 AI 智能扩展出包含艺术风格、光影构图、镜头参数及负面提示词的专业级英文 Prompt。它完美兼容 Midjourney V8.1 及 Niji 模型，支持一键复制与参数自动优化，大幅降低创作门槛，是提升出图质量与效率的必备辅助神器。
下载
以 React + React Router 为例：
这里
React.lazy
接收一个动态导入函数，内部自动处理 Promise 状态。配合
Suspense
可设置加载占位内容：
预加载与预连接优化体验
虽然懒加载减少了初始加载量，但可能带来交互延迟。可通过 Webpack 的魔法注释提前提示浏览器预加载资源。
import(/* webpackPreload: true */ './heavyComponent.js')
该指令会在空闲时预先加载指定模块，提升后续访问流畅度。类似地，
webpackPrefetch: true
实现更保守的预取策略（优先级低于 preload）。
注意：合理使用预加载，避免浪费带宽。
基本上就这些。动态导入让代码分割变得简单自然，懒加载显著改善性能表现。关键是根据业务场景选择拆分粒度——太细会增加请求数，太粗则效果有限。平衡才是关键。
button.addEventListener('click', () => {
import('./utils/largeModule.js')
.then(module => {
module.default();
})
.catch(err => {
console.error('加载失败:', err);
});
});
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
);
}