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的效果。

优化前：

优化后：

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

主包再大怎么办？

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