wfvue
wfvue
  • 发布:2024-09-14 15:37
  • 更新:2024-11-11 11:21
  • 阅读:208

vue3 vite 构建的项目,分包中使用import导入echarts时, 会被打入主包中。导致主包文件变大

分类:uni-app

2024-09-14 15:37 负责人:无 分享
已邀请:
wfvue

wfvue (作者)

1.我并没有在主包引入echarts,也没有在主包调用分包里面的页面。
2.我只是在其中一个分包中以import * as echarts from 'echarts/core'; 这种方导入echarts,也只有这个分包使用echarts
3.当然我也知道 ,可以使用echarts.js这种方式在分包中使用。这种使用方式的的话vendor.js体积是不会增大的
4.但是,当我用import 这种方式的话,vendor.js体积就会增大。会把echarts整个打入到主包中
5.https://ext.dcloud.net.cn/plugin?id=18199 目前我使用这个vite插件已经可以实现功能,和我预想的一样echarts的会被打入分包中

DCloud_UNI_yuhe
  • wfvue (作者)

    在 manifest.json 中已经添加"optimization":{"subPackages":true}

    2024-09-14 17:45

  • wfvue (作者)

    问题解决subPackages 写成了subpackages

    2024-09-14 17:52

  • wfvue (作者)

    我今天又看了一下 分包还是没有成功。我看了社区里其它的帖子说是node_modules等内容会打包到vendor.js,

    https://ask.dcloud.net.cn/question/187745 这好像不符合预期。如果node_modules 很大的话,放在vendor.js中就很容易主包体积超过 2m,但是实际上主包中并没有使用这一部分内容的

    2024-09-18 14:58

  • DCloud_UNI_yuhe

    回复 wfvue: 那您node_modules没有使用,那它存在的意义是啥

    2024-09-18 15:12

  • wfvue (作者)

    回复 DCloud_UNI_yuhe: 在分包中有使用到, echarts是在分包中导入的

    2024-09-18 15:21

  • wfvue (作者)

    回复 DCloud_UNI_yuhe: 我发的第一张图片 就是分包导入echarts

    2024-09-18 15:21

  • DCloud_UNI_yuhe

    回复 wfvue: 它不是你添加"optimization":{"subPackages":true}这个之后,它就按照你的想法自动分包了

    2024-09-18 15:23

  • DCloud_UNI_yuhe

    回复 wfvue: 需要你把对应的内容移动到对应的分包文件夹下

    2024-09-18 15:23

  • wfvue (作者)

    回复 DCloud_UNI_yuhe: 你的意思是,我要把echarts这个node_modules 移动到对应分包目录下面才行是吧 。直接引入就还是在主包是吧

    2024-09-18 15:30

  • DCloud_UNI_yuhe

    回复 wfvue: 分包的东西,不能在主包中引入。你如果引入echart太大,导致无法发布,需要你去echart挂网下载压缩版的那个。


    然后把它放入分包,把主包里面echart相关的页面拆分出来,放入分包中。从主包中访问分包的页面

    2024-09-18 15:38

小小程序猿

小小程序猿

只要你使用了import按需引用Npm的包不管你是在主还是分,一定会打到主包去,我试过N次不知道是不是操作问题,但如果你import 下载的min压缩文件就可以打到分包

  • wfvue (作者)

    我也试过很多次,目前就是会把分包中使用的npm打入主包。可以试试这个插件https://ext.dcloud.net.cn/plugin?id=18199

    2024-11-12 09:07

要回复问题请先登录注册