卡比记账项目——打包优化在build的过程中，我们发现打包的文件竟然超过了500mb，影响我们的加载速度。所以有必要进行

在build的过程中，我们发现打包的文件竟然超过了500mb，影响我们的加载速度。所以有必要进行一下打包的优化。

这里我们分为两个部分进行优化：动态导入（dynamic import）、rollup chunk优化以及情景配置（条件打包）

将组件默认导出，然后通过import的形式动态导入组件的默认导出

截屏2022-12-09 13.20.08.png

再次进行打包：发现js和css都分散开来了。所有动态引入的文件都会单独打包。截屏2022-12-09 13.25.32.png

在vite.config.ts中可以设置build的rollupOptions 如果打包过程中遇到id为echarts，就新建一个echarts包，后面同理。截屏2022-12-09 13.32.24.png

可以看到这次打包结果更为细致，文件较上次也更小了截屏2022-12-09 13.34.32.png

这部分是我们手动分的包截屏2022-12-09 13.38.45.png

在ts配置里先声明一下截屏2022-12-09 14.19.50.png 再次回到vite.config.ts，接受一个对象，里面有command，根据command返回不同的选项(define) 截屏2022-12-09 13.46.17.png

再次进行build，发现没有了上次mock包的文件截屏2022-12-09 13.55.01.png 此时的加载速度就很快了