Code Splitting 的原理是什么？

代码分割（Code Splitting）是一种通过将大型应用程序代码拆分为多个独立模块或块（chunks），并在需要时按需加载这些模块的技术。其核心原理体现在以下方面：

1. 模块依赖分析
   构建工具（如 Webpack）会分析项目中所有模块之间的依赖关系（通过 import/export 语句），构建模块依赖图。入口点是整个应用程序的起点，工具会基于这些入口逐步遍历依赖图。

2. 按需分割与生成代码块 (Chunks)
   • 动态导入触发分割：使用 import() 语法（符合 ECMAScript 规范）动态加载模块是触发分割的主要机制。当工具解析到这种用法时，会将目标模块及其依赖项分离到一个新的异步代码块中。

     button.addEventListener('click', async () => {
       const module = await import('./chartModule.js'); // 代码在此处被分割
       module.renderChart();
     });
     

   • 配置入口点划分：开发者可以通过配置多个入口点 (entry points)，显式地将不同页面或功能的代码分割成独立的初始块。工具会自动跟踪各入口内的依赖。
   • 公共模块抽离：为防止重复打包共享依赖（如第三方库或多个入口共用代码），工具可配置插件自动识别这些公共模块，并提取到单独的“供应商块”（vendor chunks），例如利用 Webpack 的 splitChunks。
3. 按需加载与执行
   经过分割生成的独立代码块不会被初始加载进应用的 JavaScript 包中。浏览器只会在以下两种情况自动加载它们：
   • 解析到动态 import()：遇到动态导入语法时，浏览器会向服务器发起对相应独立块的网络请求。
   • 初始入口依赖关系图：浏览器在初始加载完成后启动应用时会自动获取运行该入口点所需依赖图里所有代码块。

通过这种机制，用户首次访问仅需下载关键代码所需的块，提高页面的启动速度；当导航至其他路由或触发特定功能之后才根据需要加载相应模块的独立块。