什么是javascript代码分割_如何动态加载模块？

JavaScript代码分割是将大JS文件拆分为按需加载的小块以提升性能。核心是动态import()语法，支持路由、组件、工具库等多场景分割，并由Webpack/Vite等工具自动处理chunk分离。

JavaScript 代码分割（Code Splitting）是指将一个大体积的 JavaScript 文件拆分成多个更小、按需加载的块（chunks），从而减少初始加载时间，提升页面性能。动态加载模块是实现代码分割的核心手段，它让浏览器只在真正需要时才获取并执行某段代码，而不是一开始就全部加载。

为什么需要代码分割？

单页应用（SPA）随着功能增加，打包后的 JS 文件可能迅速膨胀到几 MB。用户首次访问时若必须下载全部代码，会导致白屏时间长、交互延迟。代码分割能：

• 缩短首屏加载时间（关键资源更少）
• 降低内存占用（未用模块不执行）
• 支持按路由、功能或组件粒度加载
• 便于长期缓存管理（例如 vendor chunk 不常变）

如何用 import() 动态加载模块？

import() 是 ES2020 标准引入的函数式动态导入语法，返回一个 Promise，可在任何地方调用（包括条件语句、循环、事件回调中）。

示例：点击按钮时加载一个图表组件

标签： vue react javascript java js vite 浏览器 app axios 工具 ai ios 路由