Webpack / Vue Js import 与 Vue.component() 之间大小差异的说明答案

【问题标题】：Explaination for size difference betwen Webpack / Vuejs import vs Vue.component()Webpack / Vue Js import 与 Vue.component() 之间大小差异的说明
【发布时间】：2018-02-08 12:16:02
【问题描述】：

我一直在对 Vue.js 项目中的单文件组件进行一些重构。最初我在我的主 app.js 文件中使用 Vue.component() 方法来要求许多单文件组件，这些组件仅用作其他父组件的子组件。因此，我决定将它们导入各自的父组件中，而不是在 app.js 中要求它们，以使事情更加简洁和有条理。

然后我注意到一种方法比另一种方法创建了一个更大的编译文件。请注意以下示例中的“大小”。

我编译的 SettingsMenu 示例：

// Size 100,455 bytes
Vue.component('SettingsMenu' require(./components/SettingsMenu.vue));

// Size 100,778  bytes
import SettingsMenu from '../SettingsMenu.vue';

// Size 100,747 bytes
// leaving both require / import

最后一个结果让我很奇怪，将导入保留在适当的位置，并且还需要主 app.js 中的组件，从而减少了少量大小。

我更喜欢使用导入方法将所有相关或依赖的组件放在一起，但由于它会生成稍大的最终文件，因此不太理想。

是否有某种原因以这种方式导入组件会导致文件变大，最重要的是有什么方法可以减轻或消除这种差异吗？

【问题讨论】：

标签： webpack vue.js vuejs2

【解决方案1】：

但由于它生成的最终文件稍大，因此不太理想。

31 字节差异。你是认真的吗，哈哈？

【讨论】：

那是一个子组件。众多之一，所以是的，我是认真的。它们随着时间的推移而增加。那怎么回答？
你恰好有 20.000 个组件？
使用Vue.component()方法和导入的区别是334字节而不是31字节。我不明白对抗？
仍然微不足道。