使用 browserify 异步/延迟加载 Vue 组件答案

【问题标题】：Async / Lazy Load Vue components with browserify使用 browserify 异步/延迟加载 Vue 组件
【发布时间】：2016-09-13 15:58:20
【问题描述】：

我正在尝试在 laravel 项目中将一些 Vue.js 组件加载到我的 app.js 文件中（通过 elixir 使用 browserify/vueify）。

我不想一次加载每个组件，而是在需要时使用 vue router 延迟加载各个 vue 组件。

我在哪里设置 partition bundle json 文件，它的结构应该如何？

目前，我已将以下内容绑定到我的主要 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)
    }
  }
})

这就是我卡住的地方：

我们如何在 router.map 函数中延迟加载上面列出的所有 .vue 组件？
如何设置上面的partition table json文件，应该保存在哪里？

【问题讨论】：

相当老的问题，但如果有人需要更多信息来延迟加载组件。这是docs的链接。

标签： javascript browserify vue.js laravel-elixir vue-router

【解决方案1】：

来自文档https://vuejs.org/v2/guide/components.html#Async-Components

如果您是希望使用异步组件的 Browserify 用户，不幸的是，它的创建者明确表示异步加载“Browserify 永远不会支持。” 至少是正式的。 Browserify 社区发现了一些变通方法，它们可能对现有的和复杂的应用程序有所帮助。对于所有其他场景，我们建议直接使用 Webpack 来获得内置的一流异步支持。

【讨论】：