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

Posted 2023-02-22

【中文标题】仅在添加到刀片页面时导入 Vue 组件

【英文标题】：Import Vue Component only when added to blade pages

【发布时间】：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）。 我的缺点是没有检查详细的文档。

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

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

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