解决uniapp小程序主包超限与vendor.js过大打包失败

前言

在uniapp开发小程序的过程中，开发者常面临代码体积过大导致无法打包的困境，此时必须对小程序包大小进行优化。本文梳理了具体的解决思路，旨在为遇到类似问题的开发者提供参考与帮助。

方法一：线上图片

小程序体积超标往往源于static目录中图片资源过大。建议将static目录下的图片上传至外部图片服务器，小程序端通过链接形式直接调用下载图片，从而减少本地包体积。

静态图片应使用线上地址，避免放入项目本地。需注意，导航栏（navBar）的图标因仅支持本地资源，无法采用此方案，但其占用空间相对较小，影响有限。

1、上传图片资源到图片服务器上去

将切图处理好的图片上传至指定的图片服务器。

例如，图片地址可设置为：https://www.xxxxxxxx.com.cn/wx/static/images/1.png

2、处理JS和vue中的图片引用

2.1、定义JS全局变量

在main.js文件中定义JS全局变量，以便全局调用。

Vue.prototype.staticDir = 'https://www.xxxxxxxx.com.cn/wx/static/'; 
Vue.prototype.getStaticFilePath = function (url) {
    return Vue.prototype.staticDir + url;  
}

2.2、替换vue中的图片地址

此前引用的图片地址格式如下：

<view class="demo">
    <image src="/static/images/1.png"></image>
</view>

现在只需将src属性修改为如下形式即可：

<view class="demo">
    <image :src="getStaticFilePath('/images/1.png')"></image>
</view>

3、处理css中的图片引用

uniapp根目录下存在一个特殊文件uni.scss，无需在代码中显式import即可在scss中使用其中的样式变量。uni-app编译器在webpack配置中对该文件进行了特殊处理，使每个scss文件都注入该变量，实现全局可用。我们将static目录变量配置于此，即可全局调用。

3.1、定义scss全局变量

在uni.scss文件末尾添加如下配置：

// 背景图片路径
$custom-bg-img-url:'https://www.xxxxxxxx.com.cn/wx/static/';

3.2、css文件改名成scss文件

将原有的css文件后缀改为scss，并在vue文件中修改引用，添加lang="scss"属性。

<style scoped lang="scss">

</style>

3.3、替换css中的图片地址

此前css中的背景图地址格式如下：

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url(/static/imags/1.png);
    background-size: cover;
}

现在将url修改为如下形式即可：

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url($custom-bg-img-url+'/images/1.png');
    background-size: cover;
}

方法二：分包加载

除TabBar涉及的页面外，其余页面应进行分包处理，以确保主包大小合规。编译后，静态js和组件也会放入主包，因此分包方式至关重要，官网对此有详细解释。

目前小程序对分包大小有以下限制：

整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

具体使用方法请参考：

官网介绍
使用分包
独立分包
分包预下载
分包异步化

方法三：依赖分离

使用分包后可能会发现一个现象：子包的组件和js文件会被打包到主包的vendor.js文件中，导致vendor.js体积过大。

1、检查manifest.json，在这个文件下的源码视图中，在mp-weixin节点有个optimization，

optimization下的subpackages节点时用来控制微信分包的，需要将此节点设为true

"optimization" : {
    "subpackages" : true
}

2、配置好重行运行，会发现分包的js文件将不会再打包到主包的vendor.js中了

方法四：代码压缩

1、在HBuilder上面点击运行——>运行到小程序模拟器——>运行时是否压缩代码

2、在HBuilder上面点击发行——>小程序——>发行——>小程序-微信(仅适用于uni-app)(W)

3、输入小程序名称和appid点击发行即可。然后控制台会开始编译，等编译好了会自动打开微信开发者工具。

如果手动发行，则点击发行按钮后，会在项目的目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可。
如果在发行界面勾选了“自动上传微信平台”，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。

4、现在缩小了很多，以前3.2M，现在只有1.8M，现在不管是用来上传代码还是调试都完全没有问题了。

5、“运行” 和 “发行” 的区别：

运行：模式有 SourceMap 可以方便的进行断点调试；编译出的代码存放于根目录下的 /dist/dev/目录。发行：模式会将代码进行压缩，体积更小更适合发布为正式版应用；编译出的代码存放于根目录下的 /dist/build/ 目录。

总结

到此这篇关于uniapp开发微信小程序主包太大和vendor.js过大无法打包问题解决的文章就介绍到这了,更多相关uniapp小程序主包太大无法打包内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

uniapp微信小程序主包过大及vendor.js优化方案

前言