Code Splitting

Definition / 释义

代码拆分：一种前端构建与性能优化技术，把原本打包在一起的 JavaScript（或其他资源）拆成多个较小的“块”（chunks），按需或延迟加载，从而减少首屏加载体积、加快首次渲染，并提升整体加载效率。（常见于 SPA、React/Vue 等项目与 Webpack/Rollup 等打包工具中。）

Pronunciation / 发音

/koʊd ˈsplɪtɪŋ/

Examples / 例句

We use code splitting to make the first page load faster.
我们使用代码拆分来让首页加载更快。

By combining route-based code splitting with dynamic imports, the app loads only the modules needed for the current view, reducing initial bundle size and improving performance on slow networks.
通过将基于路由的代码拆分与动态导入结合，应用只加载当前页面所需的模块，从而减少初始包体积，并改善慢网环境下的性能。

Etymology / 词源

code（代码）+ splitting（拆分、分割）。该术语源于现代前端工程化的“打包（bundling）”实践：当把大量模块合并成一个文件会导致首屏资源过大时，就通过“拆分”把代码按功能、路由或依赖关系切开，实现按需加载。中文常译为“代码拆分”。

Related Words / 相关词

• Bundling
• Chunk
• Lazy Loading
• Dynamic Import
• Tree Shaking
• Webpack
• Rollup
• Minification
• Module

Literary Works / 作品用例

• You Don’t Know JS Yet: ES Modules & Beyond（Kyle Simpson）：讨论 ES Modules、动态加载等概念时常涉及与代码拆分相关的实践语境。
• JavaScript: The Definitive Guide（David Flanagan）：在模块化、加载与性能相关内容中，会出现与按需加载/拆分相近的表述与案例背景。
• Webpack Documentation（官方文档，指南与概念页）：在 “Code Splitting” 专题中系统讲解入口拆分、动态 import、缓存与 chunk 策略。