请问VUE3使用echarts按需引入写在每个组件内还是写在全局？

Question

实测两种方法都可以用。但是不是很明白VUE3所谓的摇树优化对这种外部引入的包是否有用？
所以在每个组件内写use和直接在main.js内写有什么本质的区别吗？
还是说最后都是把echarts按需打包？

Answer 1

1. 你的理解不太对。tree shaking 的目的是去掉不会用到的代码，如果一段代码会被用到，那就不应该被 tree shaking 掉。
2. Vue3 的 tree shaking 只针对它自身。比如你只用到了 ref，provide/inject 就不再必要，那么再最终生成的代码中，就可以不包含 provide/inject。自然，Vue3 的 tree shaking 无法控制其它仓库。
3. 至于 echarts 按需引入怎么写，就要看你的项目需求。比如你只有少部分页面需要用到图表，就可以在用到的地方再加载；如果你的网站打开就是一个大走势图，那么放在全局入口也无所谓。

Answer 2

有影响的。

习惯要从一开始养成

今天一个 echarts，明天一个 moment，后天一个 lodash，之后还有 monaco、antd、elementui、x6、d3

从最开始，你就需要让资源在使用时才被引入

Answer 3

在 Vue3 中，Echarts 的按需引入可以在每个组件内单独写，也可以在全局的 main.js 中统一写入。两种方式都能使用，是因为 Vue3 的 Tree Shaking 功能可以优化这种外部引入的包。

Tree Shaking 是一种去除 JavaScript 上下文中未引用代码的方法，可以帮助减少最终打包的体积，提高代码的执行效率。

关于你的问题，这两种方式在使用上没有本质的区别，都是把 Echarts 按需打包。区别主要在于代码的组织方式和维护成本。

如果你选择在每个组件内写 use，那么每个组件都有对 Echarts 的引用，这种方式下，每个组件的依赖关系更清晰，也更方便每个组件的独立开发和维护。但是，这种方式可能会引入一些额外的开发、调试和管理成本，因为你需要在每个组件中单独处理 Echarts 的引用和使用。

如果你选择在 main.js 中写 use，那么所有的组件都会共享同一个 Echarts 的引用。这种方式下，你可以在全局范围内统一处理 Echarts 的引用和使用，可以减少一些开发、调试和管理成本。但是，这种方式可能会让一些组件的依赖关系变得模糊，增加代码的维护成本。

所以，具体选择哪种方式，取决于你的项目需求和团队的开发习惯。