动态import

在上面的例子中，其实Modal组件相关的逻辑在首屏是完全不需要的，可以使用动态import的方式来引入Modal组件的逻辑，仅在点击Button组件后才加载相关的模块。

重新构建后文件的体积进一步下降，JavaScript文件的体积减小了20KB，CSS文件的体积减小了4KB，如图1-14所示。

图1-14　动态import

动态import本身其实并不减小文件的体积，背后实现这一点的是Vite的Code Splitting（代码分割）。使用Code Splitting可以将代码分割成多个文件，并且可以在需要的时候再加载，而动态import则可以告诉构建工具代码分割的分割点在哪里。

关于Code Splitting的具体内容请参考17.2节。