引言
一、开发版解决方案
打开微信开发者工具。 点击右上角的“详情”按钮。 在“本地设置”中,找到“预览及真机调试时主包、分包体积上限”。 勾选“调整为4M”。
二、体验版、正式版解决方案
分包策略:
小程序的tabbar页面必须放在主包中,但其他页面可以放在分包中。 通过合理的分包策略,我们可以将不常用的页面和功能放在分包中,从而减小主包的体积。
移除不必要的代码和文件。 压缩和优化图片资源。 使用代码分割和懒加载技术。
三、uni-app优化策略
开发环境压缩代码:
使用cli创建的项目,可以在 package.json
的script
中设置压缩选项。使用HBuilderX创建的项目,可以在运行设置中勾选“运行时是否压缩代码”。
uni-app项目会自带一个 uni.scss
文件,这个文件会自动注入到每一个页面文件中。尽量不要在 uni.scss
文件中写公共CSS代码,因为这会导致所有页面都加载这些代码,从而增加主包的体积。可以将公共CSS代码提取到一个单独的 .scss
文件中,并在App.vue
中引入。
四、实战案例
uni.scss
文件,里面除了自带的一些颜色变量代码外,还加了700行的公共class。我将这些代码提取到一个新的assets/common.scss
文件中,并在App.vue
中引入。结果,主包体积瞬间降到了1.41M!五、总结
不要在uni.scss文件内写公共CSS代码:这不仅会增加主包的体积,还会导致不必要的性能开销。 合理使用分包策略:将不常用的页面和功能放在分包中,以减小主包的体积。 优化代码和资源:移除不必要的代码和文件,压缩和优化图片资源。 开发环境压缩代码:在开发环境中启用代码压缩功能,以降低代码包的体积。
软件接单交流: