Shulou(Shulou.com)06/03 Report--

This article mainly explains the "nuxt.js page initialization load optimization method tutorial", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and study the "nuxt.js page initialization load optimization method tutorial" it!

Leafage has been online for some time. Recently, the domain name has been changed from abeille.top to leafage.top. Some search engines that have been done before are almost gone. Although abeille.top still retains access, it will no longer be used until November this year at the latest. Currently, leafage.top is tentatively used.

The home page is a combination of components of several modules, including:

Hero: the latest three records

Featured: except for the latest three records

TopPosts: the three most visited records

PostsList: records sorted by time of creation

Sidebar: 5 records of the default collation

Recommend: the latest 6 records

In the past, when each component requested to load data on its own, it would be typesetting from the page, and data requests would be made one by one. As a result, the page would have to wait for data requests from all components to finish loading, and then continue to render. The blocking time was very long. Through the speedtest test, the blocking time of the home page was as long as 4s.

As mentioned earlier, both asyncData () and fetch () block page loading until the data load is complete, so you can reduce the page load time by reducing the data request time. Since each component requests data individually, the component content is rendered sequentially in typesetting, and the data request interface is sent sequentially.

Then there is a way to shorten the time, so that these combined component data can be requested at the same time, and the maximum blocking time is the longest of multiple requests, which is no more than a few hundred milliseconds.

However, after reading the official introduction of axios, using axios.all ([method1 (), method2 ()]) cannot be used in next.js and needs to be implemented through Promise.all ([method1 (), method2 ()]). At the same time, the exported result is received through an array. An example is as follows:

Async asyncData ({app: {$axios}}) {const [heroDatas, featuredDatas, topDatas, listDatas, recommendDatas,] = await Promise.all ([await $axios.$get (SERVER_URL.posts.concat ("? page=0&size=3")), await $axios.$get (SERVER_URL.posts.concat ("? page=1&size=4")), await $axios.$get (SERVER_URL.posts.concat ("? page=0&size=3&order=viewed")) Await $axios.$get (SERVER_URL.posts.concat ("? page=0&size=10&order=likes")), await $axios.$get (SERVER_URL.posts.concat ("? page=0&size=6&order=viewed"),]) Return {heroDatas, featuredDatas, topDatas, listDatas, recommendDatas};}

After completing this optimization, the loading speed of the home page is reduced to 0.4 s, which is improved by more than a little bit.

Thank you for reading, the above is the "nuxt.js page initialization loading optimization method tutorial" of the content, after the study of this article, I believe you on the nuxt.js page initialization load optimization method tutorial has a deeper understanding of this problem, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.