当前位置:首页 > 技术分享

微信小程序主包大小问题的终极解决方案

admin2个月前 (07-25)技术分享116

针对uniapp开发的微信小程序主包太大,主包体积优化终极解决方案!【subpackage-optimize
网上找了很多普遍大众的优化方法都试过了,分包、图片、组件、公共库、图标、文件迁移这些都已经做到极致了优化了,奈何主包的大小还是超出2M,小程序的功能又多,开发无限制,分了好几个包了
最后才实现这套终极优化方案,各位开发微信小程序真的实在到没办法控制主包大小的,可以直接用我这套方法优化,保你减少至少几百kb,而且非常方便。
我已经实现了减了400kb左右,这样下去,微信小程序后续增加功能还能坚持再开发个几年的。

进入主题,只需两步,非常方便和容易操作!!

一、先安装
在项目根目录下执行命令即可,安装npm包

1
npm i subpackage-optimize

二、配置
1、在项目根目录下创建 vue.config.js 文件,已有此文件跳过即可

01
02
03
04
05
06
07
08
09
10
11
const UniPackageOptimization = require('subpackage-optimize');
const pro = process.env.NODE_ENV === 'production'// 判断生产环境
module.exports = {
    configureWebpack: config => {
        // 微信小程序打包优化
        // 需要其他平台小程序打包优化增加判断就可以了
        if(process.env.UNI_PLATFORM === "mp-weixin" && pro) {
            config.plugins.push(new UniPackageOptimization(['components'], []))
        }
    }
}

UniPackageOptimization 构造函数说明
UniPackageOptimization 接收两个参数
第一个参数是打入分包的一级目录数组
第二个参数是不打入分包的一级目录下的目录数组,第二个参数可以为空数组
UniPackageOptimization 说明中指的目录都是编译后文件的目录

2、配置 manifest.json 文件

    在对应平台的配置下添加 "optimization" : {“subPackages”: true } 开启分包优化
    目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou的分包优化
    例如下列配置:

1
2
3
4
5
6
7
8
"mp-weixin": {
    "appid""",
    "usingComponents"true,
    "optimization": {
      // 开启分包优化
      "subPackages"true
    }
  },


注意事项
1.如果被打入分包的组件中有 slot 插槽,请使用第二个参数将该组件目录从分包中剔除,否则可能会导致样式错乱,比如弹窗组件就不建议打入分包中
2.打入分包的目录下必须有 .vue 文件

转自:https://www.52pojie.cn/thread-2119250-1-1.html


扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/758.html

分享给朋友:

“微信小程序主包大小问题的终极解决方案” 的相关文章

php-cgi占用太多cpu资源而导致服务器响应过慢 利用进程和Linux的proc 定位耗资源文件

php-cgi占用太多cpu资源而导致服务器响应过慢 利用进程和Linux的proc 定位耗资源文件

在此环境下,一般php-cgi运行是非常稳定的,但也遇到过php-cgi占用太多cpu资源而导致服务器响应过慢,我所遇到的php-cgi进程占用cpu资源过多的原因有: 1. 一些php的扩展与php版本兼容存在问题,实践证明 e…

360浏览器如何禁止切换到兼容模式[本地终极办法]

360浏览器如何禁止切换到兼容模式[本地终极办法]

浏览器内核控制标签meta说明背景介绍由于众所周知的原因,国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。以360浏览器为例,我们优先通过Webk…

php高效检测远程图片是否存在

php高效检测远程图片是否存在function img_exits($url){     $ch = curl_init();    &…

贾氏鸣天鼓健耳养肾操

贾氏鸣天鼓健耳养肾操

《贾氏鸣天鼓健耳养肾操》鸣天鼓是健耳强肾治耳病的古法,贾氏越云自创的鸣天鼓健耳养肾操是在古法的基础上创建。顺序:1静坐挺胸。2双手放心脏位置的胸口,左手掌盖住右手掌。3闭目静心,深呼吸19下。4双手相互搓揉,让手掌发热。5用发热的双手手掌严…

微软Windows 10升级密钥(例如家庭版升级为企业版) 不能用于激活系统

微软Windows 10升级密钥(例如家庭版升级为企业版) 不能用于激活系统

下面的密钥,是微软官方提供的,仅能用于Windows10系统版本的升级,比如从家庭版升级为专业版、专业版升级为企业版等。升级密钥不能用于激活系统,激活需要KMS或者数字权利,由于涉及到版权问题,在此不宜分享,请大家自行查找激活相关的内容。准…

七牛html js上传带进度条源码

七牛html js上传带进度条源码注册链接https://s.qiniu.com/uM7RJv完整代码下载:https://n802.com/f/349707-489018989-c141f6(访问密码:5036)http://www.yi…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。