工程化与性能 · 单选题 · 第 61 题
前端与全栈开发面试 · 第 61 题
在 React 或 Vue 项目中使用动态 import() 加载某个路由页面,效果是?
- A和静态 import 完全一样,仍然会被打进主包里一起加载
- B这个模块会在服务器端执行,浏览器只接收它渲染出的 HTML
- C该模块会被永久缓存在 localStorage 中,以后都不再请求
- D打包时为它生成独立的 chunk,访问到该路由时才加载
答案
D D. 打包时为它生成独立的 chunk,访问到该路由时才加载
解析
动态 import() 是打包工具认可的分割点,配合 React.lazy 或 Vue Router 的路由懒加载,可以显著减小首屏 JS 体积。代价是首次进入该路由时多一次请求,可以在鼠标悬停或空闲时预取来弥补。chunk 文件名带内容哈希,适合长期强缓存。