打包优化

100 阅读1分钟

我发现打包出来的的柴柴记账居然有4M之大,于是决定进行打包优化

打包优化

dynamic import

动态引入组件,这样只有点击了才会去请求 这样打包时,动态引入的组件会单独打包成一个文件

image.png

Rollup chunk

vite文档中,给了我们关于手动分包的介绍 手动分包,按照自己的需求打包成文件

image.png

在vite.config中加上配置项之后再次打包试一试

image.png Echarts、mock、Vant、以及第三方包被打包成文件,但是在生产环境中,我们并不需要mock,尤其是mock文件还挺大的

条件编译(情景配置)

环境变量

image.png 在vite.config文件中首先要把默认导出变成一个函数 注意,我们这里定义的所有变量都会被放到全局之中

image.png 修改mock,确保在生产环境中,mock文件不会被打包

优化结果

应该还是快了很多的