使用 Webpack 2 延迟加载 Vue 组件答案

【问题标题】：Lazy Loading Vue Components with Webpack 2使用 Webpack 2 延迟加载 Vue 组件
【发布时间】：2017-07-10 04:15:18
【问题描述】：

我希望通过webpack 尝试延迟加载。我按路线拆分我的应用程序，每条路线都有所需的组件：

const Home = resolve => {  
    require.ensure([ "../components/Home/Home.vue" ], () => {
        resolve(require("../components/Home/Home.vue"));
    });
};

每次我去不同的路线时，我都会将我的块放在不同的文件夹中： bundle1.js, bundle2.js, bundle3.js 为路由中的每个组件启用。

现在我不知道如何仅加载该路线所需的捆绑包？如果我将 bundle.js 放在 index.html 中，它将加载整个包，但我只想加载该路由所需的唯一包？

  <body>
    <div id="app"></div>
    <!-- how to auto inject build files here?? -->
  </body>

对于 Vue 组件有 Lazy Loading 部分。我这样做了，我得到了大块的捆绑文件。 但我不知道包含并加载它们的正确方法是什么。

感谢任何帮助。谢谢

【问题讨论】：

你在使用 vue-cli 和 webpack 吗？
不，我想自己设置项目。

标签： webpack vue.js vuejs2 webpack-2

【解决方案1】：

您可以在此处找到有关如何实现该功能的文档：

【讨论】：

用户知道在哪里可以找到所述文档，他们确实引用了您的链接之一。

【解决方案2】：

我们可以轻松实现延迟加载，这要归功于即将推出的 JavaScript 功能，即 webpack 支持的动态导入。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

当然这个答案来自this article，我建议你阅读它。

【讨论】：