taro 分包中共用的依赖打包到分包中(Echarts)

Echarts为例:
目录结构:
在这里插入图片描述
app.config.json中配置:
在这里插入图片描述
echarts为什么会被打包进主包中?

  • 虽然引入的ec-canvas组件(echarts-for-weixin)是在分包中使用,但echarts被echarts-for-weixin组件和外部业务组件所依赖,导致Taro认为echarts.js被多个模块所依赖,所以打包到common.js。
  • 导致主包大于2M失效

在config/index.js中配置

mini: {
    addChunkPages(pages) {
     //使用到了echarts的页面中注入common依赖
      pages.set("packageA/pages/grades/index", ["packageA/common"]);
    },
    webpackChain(chain) {
      chain.merge({
        optimization: {
       	  //将packageA分包中的依赖打包到 packageA/common.js
          splitChunks: {
            cacheGroups: {
              subpackagesCommon: {
                name: "packageA/common",
                minChunks: 2,
                test: (module, chunks) => {
                  const isNoOnlySubpackRequired = chunks.find(
                    (chunk) => !/\bpackageA\b/.test(chunk.name)
                  );
                  return !isNoOnlySubpackRequired;
                },
                priority: 200,
              },
            },
          },
        },
      });
    },
 }

Taro3中只针对了taro的组件做了注入的处理,对于小程序原生组件没有做注入处理

  • 通过taro插件,在ec-canvas中注入依赖

config/index.js

plugins: ["taro-plugin-pinia", [path.resolve(__dirname, "plugin.js")]],

config/plugin.js

const fs = require("fs");
const path = require("path");
export default (ctx, options) => {
  ctx.onBuildFinish(() => {
    console.log("echarts构建hack注入");
    const target = path.join(
      ctx.paths.outputPath,
      "packageA/ec-canvas/ec-canvas.js"
    );
    console.log("触发");
    const data = fs.readFileSync(target, "utf8");
    fs.writeFileSync(target, `require("../common");${data}`);
  });
};

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Taro Echarts是一种在Taro框架使用的图表库,用于在小程序渲染图表。根据引用,Taro版本3.07可以正常使用Echarts,而3.05版本使用小程序Echarts时可能会出现无法渲染的问题。所以建议您升级到Taro版本3.07以确保能正常使用Echarts。 关于安装Echarts依赖,根据引用,您可以使用echarts-taro3-react来安装Echarts。这样可以确保您在Taro框架能够正确引入和使用Echarts。 对于CSS部分,根据引用,在index.scss定义了一个名为"pie-chart"的class,宽度为100%,高度为650rpx。这样可以确保图表在小程序占据适当的位置和大小。 总结起来,使用Taro版本3.07,并安装echarts-taro3-react作为Echarts依赖,再根据需要在CSS设置图表的样式,即可在Taro框架成功使用Taro Echarts。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [taro 使用echarts图表.zip](https://download.csdn.net/download/weixin_40532650/12737545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Taro使用 echartsTaro3.0,react 语法)](https://blog.csdn.net/weixin_43910427/article/details/119784831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值