javascript - 高效的 VueJS 使用 UI 组件

Question

我正在为 VueJS 创建很多 UI 组件（例如按钮、输入），我不想让我的代码效率低下而且速度慢，因为我必须一直在任何地方导入它们。我的想法是，如果一个组件确实有 10 个导入，那么将有 10 个组件重用相同的代码和 CSS 类，这将使我的包变得庞大。它是这样工作的吗？有没有一种方法可以全局导入它们（如任何 CSS 类或全局 JS 函数），以便我可以从任何地方调用它们？

仅使用 CSS 类和 HTML 来避免 UI Kits 的组件是否更有效，例如这样？：

<input type="text" class="ui-kit-input">

<!-- or for something like a radio -->

<div class="ui-kit-radio">
   <input type="radio">
   <label>Male</label>
</div>

标签： javascriptvue.jswebpack

Answer 1

如果你使用的是 webpack 之类的打包工具，你的代码将被打包一次。

当一个组件导入另一个模块时，webpack 将在包中检查该文件。

Css 也被捆绑一次。