1. Test and fix the bugs
2. Refactor our codes following the best practice
3. Tune the performance
Async Components
To deal with performance (page load time), Vue provides 'Async Components' to shorten the waiting time.
We only load components if needed.
Below is an example without using Async Components.
Ex:
<template>
<the-navigation v-on:set-active-page="setActivePage"></the-navigation>
<main>
<component :is="activePage"></component>
</main>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import TheNavigation from './components/nav/TheNavigation.vue';
import UsersList from './components/users/UsersList.vue';
import ProductsList from './components/products/ProductsList.vue';
export default {
components: {
TheNavigation,
UsersList,
ProductsList,
},
data() {
return {
...
};
},
provide() {
return {
users: this.users,
products: this.products,
};
},
methods: {
setActivePage(page) {
this.activePage = page;
},
},
};
</script>
We can adjust it to use Async Component as below:
Ex:
<template>
<the-navigation v-on:set-active-page="setActivePage"></the-navigation>
<main>
<component :is="activePage"></component>
</main>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import TheNavigation from './components/nav/TheNavigation.vue';
import UsersList from './components/users/UsersList.vue';
export default {
components: {
TheNavigation,
UsersList,
// Using async component
ProductsList: defineAsyncComponent(() =>
import('./components/products/ProductsList.vue')
),
},
data() {
return {
...
};
},
provide() {
return {
users: this.users,
products: this.products,
};
},
methods: {
setActivePage(page) {
this.activePage = page;
},
},
};
</script>
Lazy Loading
Also, base on route components, vue-router provides lazy loading to split each route's components into small chunks.
Those chunks will be loaded only if needed. Therefore, it will help to improve the page loading itme.
This is an example without lazy loading.
Ex:
import { createRouter, createWebHistory } from 'vue-router';
import UsersList from './pages/UsersList.vue';
import ProductsList from './pages/ProductsList.vue';
import ProductDetail from './components/products/ProductDetail.vue';
import NotFound from './pages/NotFound.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/', redirect: '/users',
},
{
path: '/users',
component: UsersList,
},
{
path: '/products',
component: ProductsList,
},
{
name: 'product-detail',
path: '/products/:id',
component: ProductDetail,
},
{
path: '/:notFound(.*)', component: NotFound,
},
]
});
export default router
We can adjust it as below.
Ex:
import { createRouter, createWebHistory } from 'vue-router';
import UsersList from './pages/UsersList.vue';
import NotFound from './pages/NotFound.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/', redirect: '/users',
},
{
path: '/users',
component: UsersList,
},
{
path: '/products',
component: () => import('./pages/ProductsList.vue')
},
{
name: 'product-detail',
path: '/products/:id',
component: () => import('./components/products/ProductDetail.vue'),
},
{
path: '/:notFound(.*)', component: NotFound,
},
]
});
export default router
After that, you can open developer tools to monitor network activities.
Then you will see if we click 'product' or 'product-detail' page on the first time, 0.js or 1.js will be downloaded.
Using lint to improve code quality
The easiest way to improve your code quality is to utilize some tools like ES Lint to analyze your code.
Take below as an example, it works per se, but it is not the best practice to write some kind of code like that.
ESLint have defined some rules for us to analyze our code, and provide some feedback.
Ex:
if (false) { }
else {
console.log("test")
}
Errors:
Unexpected constant condition no-constant-condition
Empty block statement no-empty
No comments:
Post a Comment