Webpack代码分割中页面/Chunk的服务机制及页面切换时的Chunk加载疑问

你描述的场景其实是**单页应用（SPA）+ 前端路由 + Webpack代码分割（可能结合预加载）**共同作用的结果，具体细节如下：

1. 初始加载：只拿main.js的原因
   当用户第一次访问网站时，服务器返回的是一个极简的HTML文件（比如index.html），这个HTML里只引入了main.js。main.js包含SPA的核心框架（比如React/Vue）、前端路由配置，以及当前页面（比如首页）需要的代码。所以浏览器只需一次GET请求拿到main.js，就能渲染出初始页面。

2. 前端路由：页面切换不需要请求新HTML
   当用户切换页面时，其实是前端路由在浏览器端处理URL的变化——比如React Router、Vue Router会监听URL改变，然后根据路由规则匹配对应组件，完全不需要向服务器请求新的HTML文件。这时候如果对应组件已被Webpack打包成异步chunk，可能有两种情况：

   • 如果这个chunk已经被预加载：你可以通过Webpack的魔法注释/* webpackPrefetch: true */标记某个动态导入的模块，比如：

     import(/* webpackPrefetch: true */ './AboutPage.js');
     

     这样浏览器会在初始加载完成后的空闲时间，悄悄下载这个chunk。当用户切换到关于页时，这个chunk已经在缓存里了，自然不需要发起新的GET请求。
   • 如果组件的数据是本地缓存/预获取的：比如你在初始加载时就通过API获取了所有页面需要的基础数据，存在前端状态管理工具（比如Redux、Vuex）里，那么切换页面时只需从本地状态读取数据，不需要再向服务器请求，也就不会有新的GET请求。

3. 服务器的角色
   这里说的“服务器提供对应信息”，其实是指服务器在初始请求时返回了能启动SPA的HTML和main.js，另外还要配置回退路由：当用户直接访问某个子路由（比如/about）时，服务器不能返回404，而是要返回index.html，让前端路由来处理这个URL。如果后续有用户操作需要新的数据（比如加载更多内容），服务器才会响应对应的API请求，但页面切换本身是前端搞定的。

内容的提问来源于stack exchange，提问作者njho