uni-app中NPM打包机制及优化方案

团队使用uni-app来开发微信小程序,开始用的挺舒服的,后面项目大了,发现项目不太好维护,并且主包会超,于是做了2个方案。一个是将公有的组件及方法抽象成公共的NPM包(团队搭建了私有NPM),一个是使用了小程序分包机制。这种方法开始有一定效果,后来发现主包体积还是飞速扩张,但主包的业务基本没加,于是探究了一下uni-app中针对NPM打包的优化方案。本文尝试从以下几个方面做个总结。

开启分包优化

参照文档:manifest.json - uni-app官网

针对微信小程序一定要把optimization中的subPackages设置为true。否则,只要你NPM安装的包,都会全部打到主包。

NPM进分包只能被一个分包引用

这个比较有意思,uni-app在打包的时候如果发现一个分包引用了一个分包,其他分包没有引用,那就会把这个NPM打到分包。

如果有2个及以上的分包引用了同一个NPM,那这个NPM就会被打到主包,这个方案真的很霸道,明明是分包的引用,为什么会进主包?

如果要把分包的NPM打到分包应该怎么办?目前团队采用的方案是git submodule,但这不是个好方案。

NPM中怎么进行条件编译?

这个问题也踩了不少坑,有个比较简的方式。后来官方给了解决方案:vue.config.js中配置transpileDependencies,允许编译你指定的包。详细参考:配置参考 | Vue CLI

主包体积还是大怎么办?

尝试下Tree-shaking吧,这个之前本人也整理过方法,参考:uni-app 启用 tree-shaking - 闻心阁,下面是本人测试的使用tree-shaking的效果。

优化前

优化后

还是给业务优化出不少空间。

主包再大怎么办?

对主包业务清理一下吧,建议主包就是一个索引页+基础能力的集合,其他的业务交给分包或者其他单独的小程序去实现。