uni-app 微信小程序分包优化

井底之蛙爱蹦哒

一、优化方案

1、开启--minimize压缩模式（针对vendor.js过大的情况可以使用运行时压缩代码）

• HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
• cli创建的项目可以在package.json中添加参数--minimize，示例：

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

2、让分包的依赖就打包在分包里，别打包到主包里，其实只要添加一个配置及可以了。

打开manifest.json,在“mp-weixin”里添加代码，添加后，记得一定要重新运行项目，才看到效果，单单靠热更新是不行的！！！

"optimization":{ 
        "subPackages":true
   }

 3、分包设置

一、分包注意事项

• 微信小程序每个分包的大小是2M，总体积一共不能超过20M。所以需要分包管理文件 。
• 主包：放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；
• 分包：是根据pages.json的配置进行划分。
• 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。
• 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。
• js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
• 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

二、分包使用方法：

假设支持分包的 uni-app 目录结构如下：

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json          

则需要在 pages.json 中填写

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

三、分包跳转

在需要点击跳转的地方：

    uni.navigateTo({
      url: '/myPackageA/pages/piece/piece'
    })

 

来源：https://www.cnblogs.com/zjianfei/p/14863762.html