一、目前关于微信小程序分包大小有以下限制：

整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
单个分包/主包大小不能超过 2M

1. 图片优化

（1）静态图片使用线上地址（除了tabBar的iconPath）
（2）图片压缩

2. 分包加载：

除了TabBar的页面，其他的页面进行分包处理，保证主包的大小。具体分包方法请参考官方文档：使用分包

3. 依赖分离：

使用分包之后会发现遇到了一个奇怪的问题，子包的组件和js文件会被打包到主包的vendor.js文件中，这就导致了vendor.js过大。

检查manifest.json，在这个文件下的源码视图中，在mp-weixin节点有个optimization，optimization下的subpackages节点时用来控制微信分包的，需要将此节点设为true：

//manifest.json
"mp-weixin": { /* 微信小程序特有相关 */
	"appid": "",
	"setting": {
		"urlCheck": false
	},
	"usingComponents": true,
	"optimization": {
		"subPackages": true  // 开启分包优化
	},
	"runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式
},

配置好后重新运行，会发现分包的js文件将不会再打包到主包的vendor.js中了。（注意：实际还是有可能存在分包引入的js被打包到vendor.js中，详情可视化分析减少vender.js大小）

二、详情可视化分析减少vender.js大小

vue模式插件配置

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

//vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
 plugins: [
   new BundleAnalyzerPlugin()
 ]
}
//单独配置模式
module.exports = {
configureWebpack: config => {
config.plugins = [];
// 仅在生产模式下使用插件
   if (process.env.NODE_ENV === "production") {
     config.plugins.push(
       new BundleAnalyzerPlugin({
         analyzerMode: "server", // 可选值：'server', 'static', 'disabled'
         analyzerHost: "127.0.0.1",
         analyzerPort: 8888, // 分析报告端口
         openAnalyzer: true, // 构建完成后自动打开浏览器
       }),
     );
   }
}
 plugins: [
   new BundleAnalyzerPlugin()
 ]
}

// vite.config.js

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
	  plugins: [
			visualizer({open: true})
	  ]
	})