[英]Async / Lazy Load Vue components with browserify
I am trying to load a number of Vue.js components into my app.js file (using browserify/vueify via elixir) in a laravel project.我正在尝试在 laravel 项目中将一些 Vue.js 组件加载到我的 app.js 文件中(通过 elixir 使用 browserify/vueify)。
Instead of loading every component at once, I'd like to lazy load the individual vue components when they are needed using vue router .我不想一次加载每个组件,而是想在需要时使用vue router延迟加载各个 vue 组件。
Where do I set up the partition bundle json
file and how should it be structured?我在哪里设置
partition bundle json
文件,它应该如何构建?
At the moment, Ive tied out the following an my main app.js file:目前,我将以下内容绑定到我的主要app.js文件中:
import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';
// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';
Vue.use(Resource);
Vue.use(VueRouter);
var router = new VueRouter();
router.map({
'/async': {
component: function (resolve) {
loadjs(['./components/Users.vue'], resolve)
}
}
})
Here's where I am stuck:这是我卡住的地方:
router.map
function?router.map
函数中延迟加载上面列出的所有 .vue 组件?partition table json
file for the above, and where should it be saved?partition table json
文件怎么设置,应该保存在哪里呢?From the documentation https://v2.vuejs.org/v2/guide/components.html#Async-Components从文档https://v2.vuejs.org/v2/guide/components.html#Async-Components
If you're a Browserify user that would like to use async components, its creator has unfortunately made it clear that async loading “is not something that Browserify will ever support.”
如果你是一个想要使用异步组件的Browserify用户,不幸的是,它的创建者明确表示异步加载“不是 Browserify 永远支持的东西”。 Officially, at least.
至少在官方上是这样。 The Browserify community has found some workarounds, which may be helpful for existing and complex applications.
Browserify 社区发现了一些变通方法,它们可能对现有的复杂应用程序有所帮助。 For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.
对于所有其他场景,我们建议简单地使用 Webpack来获得内置的一流异步支持。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.