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

最新推荐文章于 2024-07-22 16:06:01 发布
最新推荐文章于 2024-07-22 16:06:01 发布
阅读量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°
关注
专栏目录
【taro react】---- 解决开发环境微信小程序由于主包体积过大不能预览问题
止于至善
05-18 1534
可以配置检测组件中未使用组件，进行删除；检测组件中未使用的方法，进行删除冗余的代码；检测整个程序未使用的css，进行删除。
Taro3.0 文件体积过大，不能预览的话 如何压缩文件体积？
qq_29263331的博客
08-16 3709
Taro3.0 文件体积过大，不能预览的话 如何压缩文件体积？ 方法一 重新新建一条命令，用watch 来监控 重新build 项目，这样体积会减少一大半 "dev:wexin": "taro build --type weapp -- --watch --env production"
辅助工具：微信小程序代码压缩器
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 583
方法一：在HBuilder运行时勾选“运行小程序时是否压缩代码”，就可以压缩体积（这种方法只能小项目使用，如果项目过大，需要分包）（pages是主包，packageA和packageB是两个分包，这里的地址对应各个页面文件夹地址。tabBer必须放在外面。
Taro 小程序开启wxml代码压缩
业余前端的职业经历
06-23 582
taro小程序
常用的代码压缩工具
Bright2017的博客
06-09 3446
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 4809
背景 近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。 为什么选择Echarts？ 微信小程序目录市面上使用最多的两款图表库，如下： echarts-for-weixin——echarts微信小程序版本 wx-charts——基于微信小程序的图表库 对比两款图表库优缺点刚好相反。 echarts-for-weixin：功能强大，但体积非常大 wx-charts：功能相对简单，但体积小 由于笔者对ech
小程序代码体积优化
weixin_34387284的博客
08-28 1566
微信小程序在发布的时候，对提交的代码有 2 MB 大小的限制。开发之前就需要提前有个心理准备。由于我也是第一次做小程序开发代码大小就超过了2MB,开发者工具都无法预览了，这就很尴尬了。我自己的优化代码积的方式也不多，如果你有更好的方法，可以给我一些指导，感激不尽哦。 1.不要引用本地图片或者图标，最好是从服务...
使用Taro实现小程序商城的购物车功能模块的实例代码
10-15
### Taro框架简介 Taro是一套遵循React语法规范的多端开发解决...通过上述介绍的初始化项目、环境搭建、编译和调试等步骤，开发者可以快速启动Taro项目，并结合具体代码实例来构建出具有购物车功能模块的小程序商城。
taro-v2ex:使用 Taro 实现 V2EX 小程序
05-02
这个项目使用了 Taro 构建了一个 论坛小程序。主要目的在于展示如何使用 TypeScript 构建 Taro 项目和使用内置的事件中心跨组件/路由传递消息。 运行 $ npm install $ npm i -g @tarojs/cli $ taro build --type ...
微信小程序代码压缩器支持全部的ES6语法及转换
08-10
微信小程序代码压缩器，支持全部的ES6语法及转换
无损压缩、解压缩小程序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
微信小程序源码压缩探索
小红帽的博客
08-03 2753
微信小程序主包具有2M的最大限制，因此压缩程序源码成为一个优化的可能。下面是一些探索的结论以及为解决问题而做的一些方案。 1. 一个结论 先说一个结论：压缩JS文件和WXSS文件对于缩小主包体积是没有作用的，js和wxss文件的确是源码中最大的两个部分，但是小程序开发工具在打包上传的时候可以设置自动压缩这两部分，因此我们不必做多余的动作（实验发现做了也是无用的）。 2. 压缩WXML WXML的压缩和单纯的HTML压缩有两个主要的不同点： WXML里面可能存在WXS脚本，而WXS的处理不同于WXML的处
centos上部署nginx
sanra123的博客
10-29 246
一. 安装： 参考：2019 年如何在 CentOS 7 上安装最新版 Nginx 二. 部署服务 参考： https://linuxize.com/post/how-to-set-up-nginx-server-blocks-on-centos-7/ 拿Nginx 部署你的静态网页
论一次 taro小程序分包优化经历，小程序体积过大的优化
业余前端的职业经历
01-19 3654
篇幅可能有点长。 感兴趣的童鞋 请耐心看下 都是经验总结哈 由于公司要在小程序上面加上一个聊天的功能 ，选来选去 最后选择了 腾讯的im 由于需要用到的一些功能可能比较新吧。所以优选选择了 最新的sdk 当时代码体积是 1.7M，但是没想到 就这个sdk 就有三四百kb 别说再加上聊天的业务代码了。 然后就开始了 长久的优化缩小 代码体积包的经历 下面就是 意义罗列出来 当时那些减少了体积，最后 保证了不影响现有业务的情况下 把小程序上了。当然空间也只剩下 50kb左右的空间 就溢出。很危险 。 这里
【taro react】---- 微信小程序 optimizeMainPackage 优化主包体积大小
止于至善
05-21 980
如果该 module 被多个分包内的 page 引用，正常情况下会被提取到主包的公共模块中，这里为了保证主包的体积最优，则会先提取成一个公共模块，然后分别复制到对应分包的 sub-common 文件夹下（因为小程序无法跨分包引入文件，所以这里需要每个分包都复制一份），需要注意的是，这样会导致总包的体积变大一些。但是注意依赖被多个分包使用时，建议单独处理优化，如果依赖像 classNames 一样小，可以直接提取到主包，如果是像 im 的 UI 依赖一样大，建议还是提取到每个使用的分包中。
Taro——分包
qq_42345237的博客
06-18 4343
分包和微信小程序分包一样，需要在app.jsx中去配置subpackages选项 subpackages: [ root: 'pages/distributionOrder/', name: 'distributionOrder', pages: [ 'index', 'add/addOrderInfo', ] ] 字段 类型 说明 root String 分包根目录（src里的） name String 分包别名，分包预下载时可以
taro压缩_Taro 如何开始微信小程序的开发
weixin_39664696的博客
01-04 213
代码：https://github.com/ikuokuo/start-taro前提准备yarnglobaladd@tarojs/cli创建项目taroinitmy-app输出信息：?Tarov3.0.16Taro即将创建一个新项目!Needhelp?Goandopenissue:https://tls.jd.com/taro-issue-helper? 请输...
Taro UI：小程序左滑喜欢右滑效果实现教程
Taro是一个基于React的多端开发框架，它允许开发者使用熟悉的JavaScript编写代码，然后编译成微信小程序、百度小程序、支付宝小程序以及H5和RN等平台的兼容版本。这种灵活性使得Taro成为了现代前端开发者的热门选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值