uview放在主包太大，如何放到分包，并且可以在主包正常使用

由于主包太大，一直想办法解决，其中由于使用了uview组件，使得主包体积更大。我一直都没有找到非常完善的方法，有些说按需引入可以解决，或者尽量减少引用组件等，但由于我主包实在太大，经过不断的尝试，由此得出以下算是大大解决的方法，因此记录下来方便大家作为参考，对你有帮助的话点个👍哇~~

1、使用npm下载uview

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uview-ui@1.8.8

// 更新
npm update uview-ui

2、创建分包目录

在项目根目录下创建一个分包目录，例如subpackage。

3、移动uView文件

将uView的相关文件从主包的uni_modules/uview-ui目录移动到分包目录中，例如subpackage/uview-ui。

4、配置分包

在app.json文件中配置分包信息。找到subPackages字段，添加分包的路径和名称，例如：

"subPackages": [
  {
    "root": "subpackage",
    "pages": [],
  }
]

并且设置preloadRule进行分包预配置

如果想要主包使用分包的资源，那么在调用资源时，要确保已经预加载过分包

    "preloadRule": {
		"pages/index/index": // 页面路径
		// 页面的预下载配置
		{
			"network": "all", // all(不限网络) wifi(仅wifi下预下载)
			"packages": ["subPackages"] // 预下载分包的 root 或 name。__APP__ 表示主包
		}
	},

5、修改uview配置

其实和uview文档配置一样，就是需要修改引用路径

npm安装方式配置 | uView - 多平台快速开发的UI框架 - uni-app UI框架

1. 引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "@/subPackages/uview-ui";
Vue.use(uView);

2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/subPackages/uview-ui/theme.scss';

3. 引入uView基础样式

注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

//在App.vue中
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/subPackages/uview-ui/index.scss";
</style>

4. 配置easycom组件模式

easycom方式引入组件不是全局引入，而是局部引入。

easycom的说明文档👉pages.json 页面路由 | uni-app官网

	//在pages.json中
    "easycom": {
		"autoscan": true,
		"custom": {
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",//uni-ui
			"^u-(.*)": "@/subPackages/uview-ui/components/u-$1/u-$1.vue"//uview
		}
	},

6、主包使用分包里面的组件

在pages中添加componentPlaceholder占用组件，每一个使用分包的组件都需要配置

具体请看占位组件 | 微信开放文档

	//在pages.json中
    "pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle": "custom",
				"componentPlaceholder": {
					"tpl-search-bar": "view",
					"tpl-cate-nav-swiper": "view",
					"u-sticky": "view",
					"u-tabs": "view",
					"u-waterfall": "view",
					"u-lazy-load": "view",
					"u-loadmore": "view",
					"u-back-top": "view",
					"u-badge": "view"
				}
			}
		}]

接着就是每个主包的页面手动引用分包的组件并注册使用