构建工具中的代码分割功能如何提升网页加载速度

打开一个网页，等半天还在转圈？你可能没意识到，背后的代码结构正在拖慢体验。现在很多前端项目体积越来越大，一股脑全塞进一个文件里，浏览器得全部下载解析完才能干活，卡顿自然少不了。

什么是代码分割

代码分割（Code Splitting）是现代构建工具提供的一项核心功能。简单说，就是把一大坨 JavaScript 代码拆成多个小块，按需加载。比如你访问电商网站的首页，没必要一上来就加载购物车、订单管理这些页面的代码，先加载首页需要的部分就行。

主流工具怎么实现

像 Webpack、Vite 这类构建工具，都原生支持代码分割。你不用手动切文件，只需要在代码里标记哪些模块可以独立打包。最常见的写法是动态导入（dynamic import）：

button.addEventListener('click', () => {
  import('./modal.js').then((modal) => {
    modal.open();
  });
});

这样写之后，构建工具会自动把 modal.js 及其依赖单独打包成一个 chunk。只有用户点了按钮，这个文件才会被请求加载。省带宽，也加快首屏渲染。

路由级分割更常见

单页应用（SPA）里，通常按页面做分割。比如用 React Router 或 Vue Router 时，配合懒加载：

const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

// 路由配置中使用
{ path: '/', component: Home }
{ path: '/about', component: About }

用户访问哪个页面，才加载对应组件。哪怕整个项目有几十个页面，初始请求也只拿必要的那一小部分。

实际效果怎么样

举个例子：原来首页加载要 1.8 秒，因为主 JS 文件有 1.2MB。开启代码分割后，首屏代码压缩到 400KB，首刷降到 800 毫秒。虽然其他页面加载会多一次请求，但整体体验顺滑多了，尤其对手机用户和网络差的人更友好。

构建工具还会自动做公共模块提取。比如多个页面都用到了 lodash，这部分会被单独拎出来，避免重复下载。缓存也能用上，下次进其他页面直接从缓存取。

如果你在维护一个老项目，发现打包后文件越来越臃肿，不妨试试开启代码分割。配置不复杂，收益却很明显。现在的框架脚手架基本都默认启用了，但了解它怎么工作，出问题时能更快定位。