Lazy Loading Vue Components with Webpack 2

2
votes

I am looking to try lazy loading with webpack. I split my app by routes, and every route has required component:

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

I got my chunks in separate folders every time I go to different route: bundle1.js, bundle2.js, bundle3.js an on for every component in routes.

Now I don't know how can I load only bundle I need for that route? If I put bundle.js in index.html it will load the whole bundle, but I just want to load the only bundle that I need for that route?

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

There is section for Lazy Loading for Vue components. I did that and I get chunks of bundle files. But I don't know what is proper way to include them and load it.

Any help is appreciate. Thanks

2
webpackvue.jsvuejs2webpack-2
are you using vue-cli with webpack? – wong2
No, I want to setup project by myself. – Klark

2 Answers

0
votes

We can implement the lazy loading easily, thanks to an upcoming JavaScript feature, dynamic imports, that webpack supports.

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')
    }
  ]
})

Of course this answer was taken from this article and i suggest you to read it.