解决HbuiderX将uni-app开发的项目运行到小程序编译后文件vendor.js太大的问题

分包分包分包！！！！！

直接略过网上一下简单操作如勾选运行时是否压缩代码，感觉并没有什么用！

众所周知，h5上运行正常的代码，犹豫兼容的原因，在编译为小程序后会出现种种问题。解决报错问题请转到链接【bug】HbuilderX运行到微信小程序 报错_ys_healone的博客-CSDN博客

解决完报错能运行后，又出现一个问题就是警告：vendor.js文件过大。

vendor.js是将各种vue依赖编译在一起的一个js文件，我的有1.7M，对于小程序2M上限来说这个问题是致命的。看了很多文章，总结一下解决方案

解决方案一：分包

分包太重要了，而且也不难，看一下文档就会，总结一下就是：在pages同级建新的分包目录，在pages.json中声明分包路径，页面中针对修改一下分包中的页面跳转路径就可以了。

假设支持分包的 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": { ...}
        }]
    }],
    
}

pages为主包，subPackages下的每个root是一个分包

因为初次打开一个分包，需要加载分包中的文件会让初次打开分包页面过慢，可以做一下分包预加载 ，在pages同级增加如下代码

"preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }

分包与分包预加载详细请移步文档uni-app官网 

解决方案二：压缩vendor.js文件

推荐使用gulp压缩，暂无经验

总结

因为vendor.js虽然大，但是依赖属于按需加载，主包中引用得少，做了分包后我的项目就没问题了也就没有针对vendor.js进行压缩，暂时没有这方面经验。分包没有解决问题的建议百度搜索其他网友的方案