taro+vue3 引入echarts图表后分包，上传时主包体积太大无法上传解决办法

最新推荐文章于 2024-04-26 22:36:09 发布
最新推荐文章于 2024-04-26 22:36:09 发布
阅读量523 收藏
点赞数 1
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43209133/article/details/132363715
版权

1、新建分包moduleA
在这里插入图片描述
2、app.config.js 添加文件路径
在这里插入图片描述
3、由于分包引入了echarts, 小程序上传时，分包里的echarts插件被打包到主包的common.js中导致主包体积过大无法上传，这时config下的dev.js 或者index.js添加以下代码，就可以了，打包时分包里的插件打包进了分包
在这里插入图片描述

weixin_43209133
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Taro+Vue3 小程序引入echarts表
zjq_1234的博客
04-18 2141
小程序中引入echarts
vue+taro3.3+ts打包小程序过大解决方法
weixin_45075981的博客
11-30 704
如果js文件过大，可以通过接口形式获取文件中的内容。在config下的index.js文件中添加如下。比如：mount.js要换成day.js。
微信小程序关于主包大小不能超过1.5MB的问题
最新发布
℡メ㏑╭ァ小凯
04-26 582
2、进入如图的分析页面，能明确知道你哪个插件包太大，我这里之前echart的包就1mb，现在给他缩减到了500kb的样子。3、解决vant等npm包太大的问题，勾上不上传依赖文件就行。4、这些都无法解决的时候，就弄分包，这个看官方教程即可。1、把资源文件改成远程服务器的，比如png这些。常规的解决办法有以下几种。
教你解决Taro微信小程序中使用Echarts体积过大的问题
ForeverCjl的专栏
11-06 4616
背景 近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。 为什么选择Echarts？ 微信小程序目录市面上使用最多的两款图表库，如下： echarts-for-weixin——echarts微信小程序版本 wx-charts——基于微信小程序的图表库 对比两款图表库优缺点刚好相反。 echarts-for-weixin：功能强大，但体积非常大 wx-charts：功能相对简单，但体积小 由于笔者对ech
Taro3+Vue3使用echarts
03-22 2132
地址:可自行选择版本，笔者测试了5.3.3和5.4.1都支持下载后得到echarts.min.js请根据需要自行选择需要的图表打包下载，我只选了默认的饼图、柱图、线图;
微信小程序中主包和分包过大，详解分包问题
qq_43638732的博客
07-28 4316
博文介绍了对于较大的项目而言，根据微信开发者工具中提示，从自用组件、官方组件、项目配置等方面提出分包、精简项目的见解。
微信小程序引入echarts 过大最佳解决方案
weixin_45527865的博客
10-21 6237
引入echarts以后，单echarts代码包已经973KB，如何能压缩大小？ 使用自定义的方法 压缩文件大小 官网地址 可以根据实际项目情况选择用到的echarts组件进行构建，如下图所示： 选择完成以后，点击【下载】就可以下载我们自定义构建的echart文件 注：勾选代码压缩以后下载的文件名称为：echarts.min.js 未勾选代码压缩以后下载的文件名称为：echarts.js 将下载的echarts.min.js重命名为echarts.js替换项目ec-canvas目录下的echart.
vue3+taro+nutui+pina小程序空白框架
03-25
vue3+taro+nutui+pina小程序空白框架
mall:基于taro.js + vue3 + typescript + taro-ui-vue3 搭建的模板
05-23
基于taro.js + Vue3 + taro-ui-vue3 搭建的模板 环境准备 初始化 node_modules: npm install or(推荐, 尽量在执行前开启梯子) yarn 提供的脚本 具体可以查看 package.json 中的脚本列表. 主要脚本为: start 启动项目...
Taro + vue3 +ts + pinia的前端小程序/h5 框架模板
03-22
Taro + vue3 +ts 的前端小程序/h5 的框架模板，其中将request.js 的请求封装好了 使用的数据状态管理时pinia 其中的store 文件都已经建好 手动封装的tabbar 我们可以直接从这个基础上去开发，我们会节省很大的成本，...
echarts-taro3-react:taro3.x-react构建的微信小程序echarts组件，及使用示列
04-28
echarts-taro3-react基于Taro3.x-React框架构建的微信小程序版本echarts组件，及使用示例代码体积过大解决方案：使用分包，自定义echart.js，自行前往（注意：版本需要选择4.9.0，不要勾选压缩，可下载下来后自行...
taro + vue3 开发微信小程序的模板.zip
01-04
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求，提供更好...
小程序打包体积过大的解决方案
LittleMoon_lyy的博客
06-18 1万+
小程序打包体积过大
taro小程序添加Echarts代码包过大解决办法
V_AYA_V的博客
10-20 762
上回书说到如何在Taro小程序中引入Echarts图表。如果小程序主包代码体量不多可以直接使用，但是如果小程序代码体量大，稍不留神就会导致主包代码超过2M，无法预览也无法真机调试。本文着重介绍一下Taro引入Echarts分包操作以及注意事项。 前文链接，完整流程可以自行查阅 taro小程序添加Echarts实践 分包操作： 将与echarts组件相关都移到分包中，结构目录如下 配置app.config.js ... subpackages: [ { root: "subpag.
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
01-22 2万+
使用uniapp开发微信小程序时主包太大和vendor.js过大无法打包的问题 在uniapp开发小程序这一块，相信很多开发者都遇到过代码体积太大无法打包的问题，这时候就要优化小程序包大小。下面分享一下我的解决思路。希望能给大家一些帮助吧。
echarts如何定制使用以便于减小打包体积
xvzhengyang的博客
08-25 1849
echarts vue 包体积
vue_按需引入elment、echarts和路由懒加载，减少打包体积
热门推荐
编程知识分享，主打前端
07-25 3万+
按需引入
VUE引入Echarts 打包文件过大——解决方法2：CDN引入
xiaozhuge_S
06-05 9382
小伙伴们注意啊！敲黑板了啊！ 由于在vue中按需引入echarts，虽然打包时比全局引入小了一半，但还是占很多内存。 所以经过不懈研究，发现了一个能让vue项目打包时更小的方法，就是CDN引入 CDN这个方法时真的很好用，打包之后发现基本没占啥空间。我所理解的CDN这个方法，就是相当于远程连接网上的资源，这么理解也不知道对不对哈～ 详细步骤如下： 在vue项目中的index.html文件里使用sc...
小程序引入的echarts过大如何解决_Taro 解决使用echarts体积过大的问题
weixin_28717807的博客
12-30 3179
背景近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。为什么选择Echarts？因为已有项目使用了ec-echarts, ec-canvas使用了echarts.js, 所以暂时只能沿用, 由于echarts比较大, 建议新开发的简单功能可以使用别的画图组件,单包超过2M，为什么？不处理的情况下, 导...
taro3+vue3添加图表
11-15
以下是使用Taro3+Vue3添加图表的步骤： 1. 安装echarts和echarts-taro依赖： ```shell npm install echarts echarts-taro ``` 2. 在需要添加图表的页面中引入echarts和echarts-taro： ```javascript import * as echarts from 'echarts'; import { ECharts } from 'echarts-taro3-react'; ``` 3. 在template中添加ECharts组件，并使用ref获取组件实例： ```html <template> <view> <ec-canvas ref="ecCanvasRef" canvas-id="mychart" :ec="ec"></ec-canvas> </view> </template> ``` ```javascript setup() { const ecCanvasRef = ref(null); const ec = { onInit: (canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); ecCanvasRef.value = chart; return chart; } }; return { ecCanvasRef, ec }; } ``` 4. 在mounted钩子函数中使用echarts实例绘制图表： ```javascript mounted() { const chart = this.ecCanvasRef; const option = { // echarts配置项 }; chart.setOption(option); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值