仅在添加到刀片页面时导入 Vue 组件答案

【问题标题】：Import Vue Component only when added to blade pages仅在添加到刀片页面时导入 Vue 组件
【发布时间】：2018-02-28 04:15:07
【问题描述】：

我开始使用 Laravel、Vuejs 和 Blade 为模板引擎开发应用程序。
首先，我是 Vuejs 世界的新手，也许是一项简单的任务，但我在任何讨论中都没有找到答案。
核心思想是使用 .blade 页面，当我需要 vuejs 组件时，将它们添加到页面中，通过 props 数组传递服务器的数据。一切工作正常，但玩了一会儿之后，我注意到一个可能存在的问题。
在 laravel 的文档中，我们注册组件，或者 app.js 中的任何 Vue 设置：然后，使用 laravel mix，我们将所有代码（例如导入、需要、不同的 js 页面......）绑定在一个文件中，最后我们使用脚本标签在我们的页面中加载“app.[hash].js”。我注意到即使只使用了几个 vue 组件，app.js 也增长得非常快（当然，我们将每个组件都导入一个文件中），甚至动态地导入组件而不是全局设置它们。

我的问题是：将所有 js 代码绑定在一个文件中是正常的（有一个大文件），或者有没有办法只在 .blade 文件中添加 vue 组件时才导入它们，也许使用某种 webpack（laravel混合）设置？

提前感谢您的支持。

发布问题后找到解决方案：

Marcin 和 GoogleMac 的答案可能都是正确的，但我发现了一个有趣的话题，我想分享给任何可能遇到我的问题的人。我建议查看此链接https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/，他们在其中讨论代码拆分。我认为这可能是最好的方法，主要是因为即使在 vue 的文档中也谈到了（这里有详细信息https://vuejs.org/v2/guide/components.html#Async-Components）。我的缺点是没有检查详细的文档。

【问题讨论】：

标签： javascript laravel vue.js components blade

【解决方案1】：

您可以添加多个app.js（如果需要，还可以添加多个router, vuex）。在webpack.mix.js 上分别输入它们。然后根据需要在刀片文件中包含合适的app.js 文件。如果您不想与任何永远不会使用这些组件的用户共享一些 .js 代码，我认为这会容易得多。

注意：当然延迟加载是一种解决方案，但这对我来说更方便，因为我不会向不需要它的用户提供任何组件。

【讨论】：

【解决方案2】：

我同意 Marcin 的回答，但如果您想要解决方法，请在 app.js 中注释掉 Laravel 内置的 Vue 注册，并在您的刀片文件中使用 cdn。

【讨论】：

【解决方案3】：

最好将 js 代码捆绑在一个文件中，因为它只会被浏览器下载一次并被缓存。

JavaScript 代码没有那么大，所以不要为它烦恼。

【讨论】：