search

TheLarkInn / code-splitting-examples

VueJs and webpack Code Splitting Examples
28 stars 5 forks source link

How does this lazy load? #1

Open samit4me opened 7 years ago

samit4me commented 7 years ago

Complete newbie to the vuejs world and I've been trying to get code splitting to work in the router but have been unsuccessful :(

After cloning this repo and running npm run dev and visiting http://localhost:8080/#/ExampleTwo in Chrome the network tab reported the following: screen shot 2017-08-18 at 3 24 46 pm

As you can see all the chunks are loaded upfront (including Home) which doesn't seem correct, is it? If you then click the "Home" link, there is no activity in the network tab, I was expecting it to load the code for the home page, is something broken or am I doing something wrong?

The other thing I noticed is that the chunked filenames don't appear to math the webpack config of chunkFilename: '[name].[id].lazy.js', so instead of home.0.lazy.js it is 0.0.lazy.js. Is this wrong, has something changed in the vue / webpack space that has broken this demo?

Any help would be super awesome as I've been completely unsuccessful in getting code splitting working.

samit4me commented 7 years ago

Interestingly, I installed the latest version of vue-cli (2.8.2) and generated a new project with vue init webpack my-project. I then created a few new components and added them to the router via the es6 import() and it appears to work, both the lazy loading and the chunk filenames, so not sure why it's not working in this repo. For reference the working repo is https://github.com/samit4me/vuejs-router-lazy-load.

I'm going to try to investigate why this repo and our codebase at work is not splitting correctly as we really need it. If anyone has any ideas, would love to hear them.

samit4me commented 7 years ago

Finally figured out how to get the code splitting working as I expected it too, take a look at the changes I made. Would be good to know if what I've done is correct.

gnulnx commented 6 years ago

I know this is really old, but I see the exact same behavior as your first post with the new vue-cli 3.0... I can't figure out why all the chunk load initially. Our setup at work loads them lazily, but not my hobby repo.