JavaScript代码分割核心是动态import()实现按需加载，减少首屏体积；它返回Promise，支持变量路径，配合路由、用户行为及webpackChunkName注释可优化分包与加载时机。
JavaScript 实现代码分割，核心是利用 动态导入（import()） 触发按需加载，把大块代码拆成小块，在真正需要时才下载执行，从而减少首屏体积、提升加载性能。
动态 import() 是实现按需加载的关键
与静态 import 不同，import() 是一个返回 Promise 的函数，支持传入模块路径字符串（可拼接、可变量），浏览器会在运行时发起请求并加载对应模块。
- 路径可以是相对路径、绝对路径，或由变量拼接的合法路径（如
import(`./pages/${page}.js`)） - 不能使用表达式或非法字符（如空格、未转义的特殊符号），否则会抛出语法错误
- 加载成功后，Promise 返回一个模块对象（默认导出在
default属性上）
配合路由实现页面级代码分割
单页应用中，最常见的是按路由拆分。比如 React 或 Vue 中，用 import() 替代直接引入组件：
- React 示例：
const Home = () => import('./pages/Home').then(m => m.default) - Vue 示例：
component: () => import('./views/About.vue') - Webpack 会自动将这些
import()调用识别为分割点，生成独立的 chunk 文件（如2.a1b2c3.js）
手动控制加载时机，避免过早或重复加载
动态导入不是“写上就立刻加载”，它只在执行到那行代码时才触发请求。你可以结合用户行为精准控制：
立即学习“Java免费学习笔记（深入）”；
- 点击按钮后再加载编辑器模块：
button.addEventListener('click', () => import('./editor.js').then(initEditor)) - 滚动到某区域再加载图表库：
if (inView) import('chart.js').then(({ default: Chart }) => new Chart(...)) - 用
Promise.all()并行加载多个相关模块，减少请求数
配合 webpackChunkName 提升可维护性
在 import() 前加 Webpack 特殊注释，能为生成的 chunk 命名，方便调试和缓存管理：
-
import(/* webpackChunkName: "login" */ './auth/login.js')→ 生成login.[hash].js - 多个相同 chunkName 的
import()会被合并到同一个 chunk - Vite 和 esbuild 也支持类似语法（如
/* @vite-ignore */或原生支持命名）
不复杂但容易忽略：确保服务器正确配置，让这些异步加载的 JS 文件能被正常访问（尤其在非根目录部署时，注意 publicPath 或 base 配置）。
