Now there are many front-end frameworks, and even two hands can’t count them. Of course, there is no need to learn all of them. It is better to study one or two widely used ones in depth. In fact, I agree with most of my classmates, and think that the most worthy of our study are the mainstream Vue and React. We understand the thinking of these frameworks through in-depth study, and make ourselves more comfortable using these frameworks.
Here I take Vue, which I often come into contact with, as an example, but I also want to make a special explanation. My level is limited. If there is something that I don’t understand, you are welcome to make a contribution.
I believe that the main reason for choosing the Vue framework like me is that, as one of the most popular JavaScript front-end frameworks, it has relatively strong advantages in light weight, efficiency, and flexibility. However, after in-depth use in actual projects, it is found that some reasonable techniques can improve the performance of the app to a certain extent.
I want to share with you some of my experience in solving the problem of loading speed.
1. Slow loading speed when opening for the first time
In the projects I experienced, there was such a situation. If all the components were loaded at one time, it would be obvious that the packaged JavaScript file was too large, which directly affected the initial loading speed of the app.
I searched the community for solutions related to lazy loading, and after discussing with the team, the solution is to only load the required components, and then load other components asynchronously when the app needs them.
In fact, the way to use lazy loading in Vue is very simple. In summary, it only takes two steps:
Use dynamic import syntax to load components on demand.
Defines the loaded component as an asynchronous component.
Put a demo here:
// Home.vue
<template>
<div>Home page</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
// App.vue
<script>
export default {
components: {
Home: () => import('./views/Home.vue')
}
}
</script>
In this way, the Home component will only be loaded when needed, which can avoid loading unnecessary components on the home page to a certain extent, and can also significantly improve the app loading speed.
Second, the solution to repeated rendering
We will find that in our actual application, there will be frequent switching to view certain components, which will inevitably cause repeated rendering and affect the performance of the app.
And everyone knows that the Keep-alive component is a high-level component in the Vue project. It can help us cache component instances and improve the performance and response speed of the application. As long as the keep-alive component is used reasonably to implement caching, it can avoid Each switch has to be re-rendered.
Also with a demo:
// App.vue
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
In fact, its logic is to wrap dynamic components with keep-alive components, and Vue will cache inactive component instances. For example, in the above demo, the currentView dynamic component is wrapped with keep-alive, and the currentView will be cached when switching to realize efficient recycling of components.
But one thing to note is that when we use keep-alive components, all components will be cached by default. If you need to specify cached components, you can use the include and exclude attributes.
3. Caton problem when extracting data
In addition to the lazy loading and keep-alive components mentioned above, we can also create a good component instance to improve the loading speed in the form of asynchronous data acquisition, and then display the component method. Finally, this method can make the data advance Get ready to avoid the lag caused by fetching data in real time once the component needs to be displayed.
My personal implementation is to get data in beforeMount, and then control the display components in mounted:
// Comonent.vue
export default {
async beforeMount() {
await fetchData();
},
mounted() {
this.show = true;
}
}
4. Reasonable use of asynchronous components
Finally, I also want to share the asynchronous components provided by Vue. In fact, reasonable use can also play a better role. The specific implementation is similar to the lazy loading components introduced above.
There are two differences: one is that lazy loading components are mainly used when they are accessed for the first time; the other is that asynchronous components are used when creating component instances. Because the basic usage logic of asynchronous components is that they will be parsed asynchronously when creating an instance, and can be loaded on demand. The implementation method is:
Vue.component('async-example', function (resolve, reject) {
setTimeout(() => {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
5. Apply light application technology instead of H5
We know that light applications are becoming popular at present, among which small programs are representative, although it is not possible to directly use Vue to develop small programs. But you can combine the development method of Vue.js front-end framework with applets by using applet development frameworks, such as Taro, Mpvue, and uni-app. These frameworks can convert the syntax and characteristics of the front-end framework into the syntax and characteristics of applets, so that developers can use familiar development methods to develop applets.
Here we also recommend a way to deepen the value of small programs, directly moving existing small programs to run in your own App. This implementation technology path is called small program containers. For example, FinClip SDK allows your own Some Apps can run Mini Programs directly like WeChat.
In this way, not only can the development efficiency of small programs be improved through the front-end framework, but also the small programs can be run in apps other than WeChat, which truly realizes one-end development and multi-terminal shelves. App has hot update capability to avoid frequent AppStore review.
I believe that everyone has better and more experience in the use of the Vue framework. I only share a few methods that are relatively suitable for widespread use according to my own usage habits. I also welcome your additions and corrections.