uniapp微信小程序之分包异步化

前言

uniapp开发微信小程序开发完功能之后，发现项目大小超过了2M不能发布，确实是一件令人头疼的时候，下面我将使用分包+异步化方案来解决这个问题。

开始分包

这是文档：基础能力 / 分包加载 / 使用分包

原理

是把页面单独存放一个目录（模块），然后配置使用

项目配置

解释：subPackages是专门存放分包页面的，一个分包为一项，所以它是集合，root则是当前分包的跟路径

// pages.json
{
    "pages": [{
		"path": "pages/index/index",
        "style": 
        {
            "navigationBarTitleText" : "首页"
        }
	}],
    "subPackages": [
        {
            "root": "pages-three",
            "pages": [
                {
                    "path" : "three-render/three-render",
                    "style" : 
                    {
                        "navigationBarTitleText" : "子包pages-three的测试页面"
                    }
                }
            ],
        }
    ]
}

使用分包异步化

配置完分包之后，正常情况下，主包是不可以使用子包的代码的，如果确实需要用到，微信提供了另一个技术：分包异步化

这是文档：基础能力 / 分包加载 / 分包异步化

原理

允许主包异步加载并使用子包的组件，未加载完成的时候，使用占位组件展示，加载完成则会替换为真实的组件

如图所示：threeJs是主包想要加载的组件

项目配置

// pages.json
{
    "pages": [
        {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"usingComponents": {
				    "three-js": "/pages-three/threeJs/threeJs" // 组件的路径
				  },
				  "componentPlaceholder": {
				    "three-js": "view" // 未完成时的占位组件
				  }
			}
		}
    ]
}

注意点

重点：我们必须在子包的某个页面中，去使用这个组件，否则打包的时候会找不到文件，就像下面一样

只要在子包的某个页面，导入并渲染了组件，打包的时候threeJs就会在文件中了

配置完成，开始使用

然后呢，在主包的tab页使用这个组件，效果如下，是可以正常显示的

项目打包

当我们打包的时候，发现主包还是很大

资源占用异常

原因

因为uniapp开发的小程序使用的node_modules里面的包永远会打包到主包的vendor.js中，即使是你没有在主包中直接使用。

解决方案

要解决也很简单，把node_modules中的npm包移动到子包的目录中

然后可以修改npm的导入路径，或者在配置文件中统一设置别名，这样会更方便

// vite.config.js
import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

export default defineConfig({
  plugins: [
    uni(),
  ],
  resolve: {
    alias: {
      "three-platformize": path.resolve(__dirname, "./pages-three/npm/three-platformize"),
    },
  },
});

这样打包three就会进入子包了

完成

到了这一步全部配置的都已经完成，可以直接上传代码啦