Large Application Patterns with Vuex Chapter 18Now right-click on the refresh button and select Hard Reload to bypass the cache (or press
Shift + Cmd + R):
You will notice that the page doesn't load for a few minutes. You can stop the loading of the
page by clicking on the refresh button again when it becomes an X.
To fix this, go back to the index.js file in the router folder. Delete the following
line, where you import the Massive component:
import Massive from '@/components/Massive'The preceding line is telling Webpack to include all the code contained in the Massive
component in a single js bundle. Instead, we want to tell Webpack to keep the Massive
component as a separate bundle and to load it only when necessary.
Instead of directly importing the component, declare Massive with the following code:
const Massive = resolve =>
require(['../components/Massive.vue'], resolve)Webpack will turn this special syntax into a separate file that will be loaded lazily. Save and
do another hard refresh with the throttling still set to slow speed (like GPRS to good 3G).
After a few seconds, you should be able to see the hello page. If you want to load the
Massive component, just add massive to the URL, but you'll be in for some waiting.
How it works...
Now you obviously won't have such a big component in a real application, but you can
easily see that if the Massive component represents all the other components of your app,
they can quickly amount to such a big size.