thelarkinn/code-splitting-examples

VueJs and webpack Code Splitting Examples

code-splitting-examples

Sample of different ways you can code split with webpack and VueJS. Example application for VueConf 2017

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

code-splitting-examples's Issues

How does this lazy load?

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:

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.