Lazy Loading Vue Components with Webpack 2

Question

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

are you using vue-cli with webpack?

wong2
– wong2

2017-02-21 05:43:15 +00:00
Commented Feb 21, 2017 at 5:43 — wong2
– wong2, Commented Feb 21, 2017 at 5:43
No, I want to setup project by myself.

Klark
– Klark

2017-02-21 06:44:52 +00:00
Commented Feb 21, 2017 at 6:44 — Klark
– Klark, Commented Feb 21, 2017 at 6:44

tony19 · Accepted Answer · 2022-07-15 00:46:30Z

3

You can find a documentation about how to implement that here:

edited Jul 15, 2022 at 0:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 10, 2017 at 11:50

romandrahan

1096 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Edwards Over a year ago

The user knows where to find said documentation, they literally reference one of your links.

Roland · Accepted Answer · 2018-06-10 17:38:22Z

0

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.

edited Jun 10, 2018 at 17:38

answered Jun 10, 2018 at 17:25

Roland

28.1k9 gold badges108 silver badges103 bronze badges

Collectives™ on Stack Overflow

Lazy Loading Vue Components with Webpack 2

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related