Question

我希望使用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部分。我这样做了，我得到了大量的捆绑文件。 但我不知道包含它们并加载它的正确方法。

任何帮助都表示赞赏。感谢

Answer 1

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

Answer 2

由于即将推出的JavaScript功能，动态导入，我们可以轻松实现延迟加载。

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，我建议你阅读。

使用Webpack 2加载Vue组件

2 个答案: