When the amount of code in the project reached a certain level, we found that it took us a long time to enter the project for the first time. The reason was that the size of the packaged app.js was too large and it took a certain amount of time to load.
So what can we do to optimize performance?
About Performance Optimization
Before we begin, we need to understand one principle: the ultimate goal of performance optimization is to improve the user experience. The short answer is to make the site feel “fast” (or at least not slow hh). There are two kinds of “fast” here, one is “really fast” and one is “feel fast”.
- “Really fast” : things that can be measured objectively, such as page access time, interactive response time, and page jump time
- “Feel fast” : users’ subjective perception of performance, through visual guidance and other means to divert users’ attention on waiting time
Suit the remedy to the case
We know that the app.js file is too large and takes too long to load, which leads to the slow loading speed of the first screen. Therefore, we need to take appropriate measures to reduce the size of app.js and improve the speed of website access.
First, compression:
By compressing the code, we can reduce the volume of the code.
2. Route lazy loading:
When we use route lazy loading, projects will be loaded on demand, the principle of which is code splitting in webpack method. When you use route splitting, Webpack will split the code of app.js, reduce the size of app.js, and increase the number of first-screen loading points.
App.js without using route lazy before loading:
Code splitting on app.js after routing lazy loading:
Iii. Introduction of CDN
CDN import is used, CDN import is used in index.html, and configured in Webpack. After packaging, Webpack will package the library introduced by the third party from the outside, reducing the size of app.js, thus improving the first screen loading speed.
App.js size before CDN introduction:
Size of app.js after CDN introduction:
Four, SSR server rendering:
There are limitations to disabling beforeCreate() and created() for other life cycles, which I haven’t tried to use myself, but this is one scenario.
Five, increase bandwidth:
The increase of bandwidth can improve the access speed of resources, thus improving the loading speed of the first batch. The bandwidth of our project has been upgraded from 2M to 5M, and the effect is obvious.
Vi. Extract third-party library vendor:
Code splitting is also a webpack way of splitting, which means extracting some third-party libraries to reduce the size of app.js.
The above are just a few targeted solutions. There are many other web performance optimizations. Here are a few of them, hoping to help you.
Previous good articles of the author:
Front-end technology is changing fast, the era of VUE3.0 has arrived…
The five core concepts of Vuex are enough after reading this article
8 ways for components to communicate, have you figured it out?