设置ssr: true的动态导入组件与普通导入组件有什么区别与优势？

关于配置ssr: true的动态导入组件问题解答 #

问题1：两种导入方式的各自优势 #

普通静态导入（import { Button } from './Button'）的优势：

• 构建阶段即可完成Tree Shaking，可剔除未使用的冗余代码，打包体积可控性更高
• TypeScript类型推导更流畅，不存在动态导入可能出现的类型丢失问题
• 若组件属于首屏必用内容，加载性能更优，无额外独立Chunk的请求开销
• 代码写法更简洁，无需额外封装逻辑

开启ssr: true的动态导入的优势：

• 可将组件代码拆分为独立Chunk，仅在组件实际被使用时才加载，大幅降低首屏非必要组件带来的初始包体积负担
• 开启ssr: true后组件仍可在服务端渲染为HTML返回，不会出现客户端Hydration不匹配、首屏内容闪烁的问题
• 非常适合低频使用的组件（如弹窗、非首屏折叠内容、次级功能模块等），未触发使用时不会占用初始加载资源

问题2：两种导入方式的负载产生环节 #

• 普通静态导入：组件代码会在构建时被打包到所属页面的主Chunk中，用户访问页面时，这部分代码会随页面初始资源一同加载，无论后续是否实际用到该组件，都会产生加载负载
• 开启ssr: true的动态导入：构建阶段会将组件代码单独拆分为独立Chunk；仅当组件被实际渲染时，才会产生负载：服务端渲染阶段会执行组件代码生成HTML，同时客户端会在Hydration前请求加载该独立Chunk的代码，完成Hydration操作

问题3：showButton为false时DynamicButton的加载情况 #

不会被加载。
动态导入的触发时机是组件被实际渲染到节点树时才会执行import()回调，当showButton为false时，<DynamicButton />不会进入渲染路径，无论是服务端渲染阶段还是客户端运行阶段，都不会触发该组件对应独立Chunk的加载请求，也不会产生额外的执行开销。 #

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