3 Code Splitting Patterns For VueJS and Webpack
preface
Code segmentation is one of the important ways to improve the initial loading speed of a single page application. Because users don’t have to download all the code when they first enter the app, they can see and interact with the page more quickly. This will improve the user experience, especially on mobile; And it’s great for SEO, because Google will reduce the weight of sites that load slowly.
Last week I wrote about how vue.js and Webpack split code. To cut a long story short, each component is packaged in a single file, which makes it easy to split code, Webpack can create a split point when you import a module, and Vue can easily load an asynchronous component.
I think the hardest part about splitting code is not how to make it work, but when and where to make it work. I would say that when designing your application, think about code segmentation as architecture.
In this article, I will introduce three current ways to split vue.js code:
-
By page
-
Sxsa By page fold
- By condition
Note: This article was originally published on vue.js development blog on 7/07/08.
1.By page
Page segmentation is the clearest idea. This simple application has three pages:
Assuming that each component is a separate file, such as home. vue, about. vue, and contact. vue, we can then use Webpack’s dynamic import feature to split it into separate build files. When a user visits a different page, Wenpack asynchronously loads and requests page files to be changed.
If you use vue-Router, this is easy because your page is already in a separate component.
const Home = (a)= > import(/* webpackChunkName: "home" */ './Home.vue');
const About = (a)= > import(/* webpackChunkName: "about" */ './About.vue');
const Contact = (a)= > import(/* webpackChunkName: "contact" */ './Contact.vue');
const routes = [
{ path: '/'.name: 'home'.component: Home },
{ path: '/about'.name: 'about'.component: About },
{ path: '/contact'.name: 'contact'.component: Contact }
];Copy the codeLooking at the statistics when we compiled the code, each page is in its own file, but notice that there is an important bundle called build_main.js that contains all the common code and the logic to load other files asynchronously. No matter which route the user accesses, it must be loaded first.
Now I go to http://localhost:8080/#/contact to load the Contact page. I look at the Network menu and find the following files loaded:
Note that the build_main.js column has the initiator value of (index). This means that index.html requested the script, which is exactly what we expect. However, the build_1.js initiator is bootstrap_a877… This is the asynchronous load file that the Webpack script is responsible for. When you use Webpack’s dynamic import feature, this script automatically adds to the build. Most importantly: build_1.js does not block the loading of the initial page.
2.By page fold
Below the “fold” represents parts of the page that are not visible at the beginning. You can load these asynchronously, as it usually takes a second or two for users to read the contents above the fold, especially when visiting the site for the first time.
In this example application, I consider placing the folding line under the masthead. So let’s load the navigation bar and masthead, everything below them, when the page initializes, and load it later. I’ll create a component called BelowFold and extract the relevant code as follows:
Home.vue:
<template>
<div>
<div class="jumbotron">
<h1>Jumbotron heading</h1>
.
</div>
<below-fold></below-fold>
<! --All the code below here has been put into-->
<! --into the above component-->
<! --<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
.
</div>
.
</div>-->
</div>
</template>
<script>
const BelowFold = () => import(
/* webpackChunkName: "below-fold" */ './BelowFold.vue'
);
export default {
.
components: {
BelowFold
}
}
</script>Copy the codeBelowFold.vue:
<template>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
.
</div>
.
</div>
</template>Copy the codeWhen we compile the code, we can see below-fold packaged into a separate file:
Hint: Below-fold is so small, at just 1.36 K, that it doesn’t seem like it’s worth breaking it out on its own. Because right now it’s a very small demo application. In a real application, most of the page is below the fold, so there might be a lot of code, including JS, CSS, and all of the sub-components.
例 句 : By condition, he is in good condition.
Another option is conditional loading. For example: modal boxes, Tab pages, menus, etc.
The app has a modal box that pops up when you press the “Sign Up Today “button:
As before, we just moved the modal box code into its own single file component:
Home.vue:
<template>
<div>
<div class="jumbotron">... </div>
<below-fold></below-fold>
<home-modal v-if="show" :show="show"></home-modal>
</div>
</template>
<script>
const BelowFold = () => import(
/* webpackChunkName: "below-fold" */ './BelowFold.vue'
);
const HomeModal = () => import(
/* webpackChunkName: "modal" */ './HomeModal.vue'
);
export default {
data() {
return {
show: false
}
},
components: {
HomeModal,
BelowFold
}
}
</script>Copy the codeHomeModal.vue:
<template>
<modal v-model="show" effect="fade">... </modal>
</template>
<script>
import Modal from 'vue-strap/src/Modal.vue';
export default {
props: ['show'],
components: {
Modal
}
}
</script>Copy the codeNotice that I added v-if to the modal box. The Boolean value show is used to turn the modal box on/off, and it is also used to determine whether to render the modal box itself. Because show is false when the page is initialized, the code is downloaded only when the modal box is open.
This is appropriate because if the user does not open the modal box, the code will not be downloaded. The only downside: it has a small user experience cost, and the user must wait for the file to download after pressing the button.
Compile again, and here is the output:
Aha, we saved another 5KB of first-screen traffic…
conclusion
In addition to the above three methods of code segmentation, I believe there must be other methods to achieve, as long as you use your imagination!
Copyright Notice: All articles on this Blog are licensed under a CC BY-NC-SA 3.0CN license unless otherwise specified. Reprint please indicate the source!