小程序 (Taro) 减小包体积：压缩代码以及分包的实现

最新推荐文章于 2023-05-21 09:30:00 发布
最新推荐文章于 2023-05-21 09:30:00 发布
阅读量8.8k 收藏 7
点赞数 4
分类专栏： Taro 文章标签： 小程序 reactjs javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43582313/article/details/104830504
版权
本文介绍了如何在Taro小程序项目中通过压缩代码和分包来降低包体积，以满足微信小程序的大小限制。通过配置Taro的UglifyJS插件进行代码压缩，并提供了官方文档链接。此外，还推荐了一个在线图片压缩网站。在分包方面，展示了小程序目录结构和app.json的配置方法，并解决了分包后的路由跳转问题，同样引用了官方文档作为参考。
摘要由CSDN通过智能技术生成

用Taro做的小程序快要完工了，奈何每个包的大小只能为2M，总大小不能超过8M。所以就需要压缩代码和分包了。由于这是我第一个小程序的项目，所以我把我踩到的坑详细讲一下，欢迎大家来分享宝贵意见以及补充～
压缩代码：
plugins.uglify
Taro官方给出的配置项，用来配置 UgligyJS 工具，设置打包过程中的 JS 代码压缩。可以通过 plugins.uglify.enable 来设置是否开启压缩，若设置开启，则可以通过 plugins.uglify.config 来设置 UgligyJS 的配置项，具体配置方式如下：

uglify: {
   
  enable: true,
  config: {
   
    // 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
  }
}

只需要在config下的prod.js里配置就可以了

最低0.47元/天 解锁文章
Treasure°
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
辅助工具：微信小程序代码压缩器
03-15
当你的微信小程序编译包大小超过 1024kb 时，不要急着砍模块，我觉得它还能再挽救一下。   做了些什么 压缩 js/json/wxml/wxss 文件； 优化 jpg/gif/png/svg 文件； 没了。 目录说明 ./src 为开发目录 ./dist 为编译目录 开始使用 安装依赖： cd /yourPathnpm i 复制代码 开发模式： npm run dev 复制代码 上线或测试模式： npm run build <span style="float: left; margin-right: 5px;"
微信小程序在上传时，代码过大（压缩、分包）
最新发布
once111的博客
07-22 350
方法一：在HBuilder运行时勾选“运行小程序时是否压缩代码”，就可以压缩体积（这种方法只能小项目使用，如果项目过大，需要分包）（pages是主包，packageA和packageB是两个分包，这里的地址对应各个页面文件夹地址。tabBer必须放在外面。
Taro——分包
qq_42345237的博客
06-18 4316
分包和微信小程序分包一样，需要在app.jsx中去配置subpackages选项 subpackages: [ root: 'pages/distributionOrder/', name: 'distributionOrder', pages: [ 'index', 'add/addOrderInfo', ] ] 字段 类型 说明 root String 分包根目录（src里的） name String 分包别名，分包预下载时可以
Taro3.0 文件体积过大，不能预览的话 如何压缩文件体积？
qq_29263331的博客
08-16 3697
Taro3.0 文件体积过大，不能预览的话 如何压缩文件体积？ 方法一 重新新建一条命令，用watch 来监控 重新build 项目，这样体积会减少一大半 "dev:wexin": "taro build --type weapp -- --watch --env production"
Taro 小程序开启wxml代码压缩
业余前端的职业经历
06-23 577
taro小程序
常用的代码压缩工具
Bright2017的博客
06-09 3438
1.https://tool.lu/css/    压缩Css比较方便 2. http://tool.oschina.net/jscompress?type=2  Html,Css,Js都可以压缩。 3.http://tool.chinaz.com/Tools/CssFormat.aspx  站长工具，这个就不介绍了，常用。
教你解决Taro微信小程序中使用Echarts体积过大的问题
ForeverCjl的专栏
11-06 4788
背景 近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。 为什么选择Echarts？ 微信小程序目录市面上使用最多的两款图表库，如下： echarts-for-weixin——echarts微信小程序版本 wx-charts——基于微信小程序的图表库 对比两款图表库优缺点刚好相反。 echarts-for-weixin：功能强大，但体积非常大 wx-charts：功能相对简单，但体积小 由于笔者对ech
小程序代码体积优化
weixin_34387284的博客
08-28 1564
微信小程序在发布的时候，对提交的代码有 2 MB 大小的限制。开发之前就需要提前有个心理准备。由于我也是第一次做小程序开发代码大小就超过了2MB,开发者工具都无法预览了，这就很尴尬了。我自己的优化代码积的方式也不多，如果你有更好的方法，可以给我一些指导，感激不尽哦。 1.不要引用本地图片或者图标，最好是从服务...
微信小程序代码压缩器支持全部的ES6语法及转换
08-10
微信小程序代码压缩器，支持全部的ES6语法及转换
微信小程序源码压缩探索
小红帽的博客
08-03 2718
微信小程序主包具有2M的最大限制，因此压缩程序源码成为一个优化的可能。下面是一些探索的结论以及为解决问题而做的一些方案。 1. 一个结论 先说一个结论：压缩JS文件和WXSS文件对于缩小主包体积是没有作用的，js和wxss文件的确是源码中最大的两个部分，但是小程序开发工具在打包上传的时候可以设置自动压缩这两部分，因此我们不必做多余的动作（实验发现做了也是无用的）。 2. 压缩WXML WXML的压缩和单纯的HTML压缩有两个主要的不同点： WXML里面可能存在WXS脚本，而WXS的处理不同于WXML的处
无损压缩、解压缩小程序Jcompress.zip
07-19
Jcompress 是一款基于哈夫曼编码和最小堆的无损压缩、解压缩小程序，支持任何格式的文件的压缩与解压缩。Jcompress 的源代码位于 Utility 的 repository 分类下的 Jcompress 目录，后续会在 Utility 下面增加其他一些实用的小程序，比如基于 socket 的文件断点下载小程序等等。Jcompress代码实现1. 最小堆代码实现最小堆排序算法基本上是按照严蔚敏版的算法来实现的，其具体功能这里不再赘述，仅列出代码，读者可以参考课本自行分析之。首先是heap_min_adjust，也就是调整堆，代码如下所示：int heap_min_adjust(HuffmanNode **huffman_node_array, long data_start, long data_end){       /**       ** check error for argument       */       if(huffman_node_array==NULL || data_start<0 || data_end<0 || data_end<data_start){           printf("heap_min_adjust: argument error\n");           exit(0);       }          if(data_end==data_start) return 1;       /**       ** the top of heap-min indicated by index data_start is the only element       ** which need to be adjusted to make a min-heap       */       HuffmanNode * current_data_tobe_adjust=huffman_node_array[data_start];       long current_indexof_data=data_start;          for(long cur=2*data_start;cur<=data_end;cur=2*cur){           if(curdata_8bit_count)>((huffman_node_array[cur 1])->data_8bit_count)){                   cur =1;               }           }           if((current_data_tobe_adjust->data_8bit_count)data_8bit_count))               break;           huffman_node_array[current_indexof_data]=huffman_node_array[cur];           current_indexof_data=cur;       }       huffman_node_array[current_indexof_data]=current_data_tobe_adjust;       /**       ** return 1 means everything is ok       */       return 1;   }接下来是heap_min_construct()的代码，此函数是通过不断的调用上面的调整堆的函数来达到堆排序的目的。int heap_min_construct(HuffmanNode **huffman_node_array, long array_size){       /** valid data start from index 1 not 0 */          /**       ** check error for argument       */        if(huffman_node_array==NULL || array_size256){           printf("heap_min_construct: argument error\n");           exit(0);        }           for(long HeapRoot=array_size/2; HeapRoot>=1;HeapRoot--){           heap_min_adjust(huffman_node_array,HeapRoot,array_size);        }        return 1;   }最后是heap_min_get2min()函数。int heap_min_get2min(HuffmanNode **huffman_node_array, HuffmanNode **min_first, HuffmanNode **min_second, long *heap_size){          /**       ** check argument       **/        if(huffman_node_array==NULL){           printf("heap_min_get2min: argument error\n");           exit(0);        }          *min_first=huffman_node_array[1];       huffman_node_array[1]=huffman_node_array[*heap_size];       (*heap_size)-=1;       /** after we get the min data, we should again adjust the heap to make a min-heap */       heap_min_adjust(huffman_node_array,1,*heap_size);          *min_second=huffman_node_array[1];       huffman_node_array[1]=huffman_node_array[*heap_size];       (*heap_size)-=1;          /** the same as above*/       if(*heap_size>0){           heap_min_adjust(huffman_node_array,1,*heap_size);       }          return 1;   } 标签：Jcompress
centos上部署nginx
sanra123的博客
10-29 243
一. 安装： 参考：2019 年如何在 CentOS 7 上安装最新版 Nginx 二. 部署服务 参考： https://linuxize.com/post/how-to-set-up-nginx-server-blocks-on-centos-7/ 拿Nginx 部署你的静态网页
论一次 taro小程序分包优化经历，小程序体积过大的优化
业余前端的职业经历
01-19 3617
篇幅可能有点长。 感兴趣的童鞋 请耐心看下 都是经验总结哈 由于公司要在小程序上面加上一个聊天的功能 ，选来选去 最后选择了 腾讯的im 由于需要用到的一些功能可能比较新吧。所以优选选择了 最新的sdk 当时代码体积是 1.7M，但是没想到 就这个sdk 就有三四百kb 别说再加上聊天的业务代码了。 然后就开始了 长久的优化缩小 代码体积包的经历 下面就是 意义罗列出来 当时那些减少了体积，最后 保证了不影响现有业务的情况下 把小程序上了。当然空间也只剩下 50kb左右的空间 就溢出。很危险 。 这里
【taro react】---- 微信小程序 optimizeMainPackage 优化主包体积大小
止于至善
05-21 929
如果该 module 被多个分包内的 page 引用，正常情况下会被提取到主包的公共模块中，这里为了保证主包的体积最优，则会先提取成一个公共模块，然后分别复制到对应分包的 sub-common 文件夹下（因为小程序无法跨分包引入文件，所以这里需要每个分包都复制一份），需要注意的是，这样会导致总包的体积变大一些。但是注意依赖被多个分包使用时，建议单独处理优化，如果依赖像 classNames 一样小，可以直接提取到主包，如果是像 im 的 UI 依赖一样大，建议还是提取到每个使用的分包中。
taro压缩_Taro 如何开始微信小程序的开发
weixin_39664696的博客
01-04 211
代码：https://github.com/ikuokuo/start-taro前提准备yarnglobaladd@tarojs/cli创建项目taroinitmy-app输出信息：?Tarov3.0.16Taro即将创建一个新项目!Needhelp?Goandopenissue:https://tls.jd.com/taro-issue-helper? 请输...
代码体积减少80%！Taro H5转换与优化升级
啊啊啊啊2
04-04 751
前言作为一个多端开发框架，Taro 从项目发起时就已经支持编译到 H5 端。随着 Taro 多端能力的不断成熟，我们对 Taro H5 端应用的要求也不断提升。我们已经不再满足于“能跑”，更希望 Taro 能跑得快。我们经常收到用户反馈：为什么使用 Taro 脚手架创建的空项目，打包后代码体积却有 400KB+；也有用户在 Issue 中提到，Taro 的部分 Api 占用空间巨大，事实上功能却并...
taro之--打包体积
m0_74433188的博客
04-02 1069
但值得注意，Taro 默认的打包配置是为了让多数项目和需求都可以运行，而不是针对任何项目的最优选择。因此你可以在 Taro 配置的基础之上再针对自己的项目进行优化。在一些情况，我们希望我们的页面只有当用到时才按需进行加载。这种情况在 Taro 应用被称为分包，分包的使用也非常简单，只需要通过配置入口文件。来分析我们依赖打包体积，这个插件会在浏览器打开一个可视化的图表页面告诉我们引用各个包的体积。，如果你不需要那么高的兼容性，或者不需要某些 ES2015+ 语法支持，可以自行配置。配置的，具体来说是使用。
小程序打包体积过大的解决方案
热门推荐
LittleMoon_lyy的博客
06-18 1万+
小程序打包体积过大
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值