How to achieve page optimization and reduce the first screen time?

1. Reduce the volume of entry files: The common method is lazy loading of routes. Only the corresponding components will be loaded when the routes are parsed, and only the js and css files required by the current component will be loaded to reduce unnecessary file requests; code: const UserDashboard =
   ( ) => import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
   But the entry file still imports all js and css files, why?
   The reason is that vue-cli3 will add prefetch to all JavaScript files loaded on demand through import by default, and the attribute rel="prefetch" in the link needs to be turned off manually; code
   :

   // view.config.js

         module.exports = {

           chainWebpack: (config) => {

             // Remove the prefetch plugin

             config.plugins.delete("prefetch");

             // or

             // modify its options:

             config.plugin("prefetch").tap((options) => {

               options[0].fileBlacklist = options[0].fileBlacklist || [];

               options[0].fileBlacklist.push(/myasyncRoute(.)+?.js$/);

               return options;

             });

           },

         };

2. Local cache of static resources: resources returned by the backend (using http cache); reasonable use of localstorage by the frontend; CDN static resource cache;

3. UI framework loaded on demand

4. Avoid repeated packaging of components

5. Image resource compression: Merge multiple images into one image, and only need one request to download the required resources, reducing the consumption of connection establishment, which is more obvious on the mobile terminal; for example: sprite image

6. Reduce the number of dom elements;

7. Reduce the size of cookies: Minimizing the size of cookies is very important to reduce the time it takes for users to get a response;

8. Reduce http requests;

9. Webpack enables gzip compression: it is not recommended to compress images, mainly to compress HTML, css, JavaScript and other static text conditions;
   code:

   const CompressionWebpackPlugin = require("compression-webpack-plugin");

         const isProduction = process.env.NODE_ENV === "production";

         module.exports = {

           //Enable gzip

           configureWebpack: (config) => {

             if (isProduction) {

               // Configure webpack compression

               config.plugins.push(

                 new CompressionWebpackPlugin({

                   test: /.js$|.html$|.css$/,

                   // more than 4kb compressed

                   threshold: 4096,

                 })

               );

             }

           },

         };

10. For large-sized pictures that do not need to be displayed on the first screen, use lazy loading of pictures (vue-lazyload) to load pictures in the visible area first, and then load other parts after entering the visible area to improve performance; code
    :
    main.js

    import VueLazyLoad from "vue-lazyload";

          Vue.use(VueLazyLoad, {

            preload: 1,

            error: require("./error.jpg"), //error image

            loading: require("./loading.jpg"), //loading image

            attempt: 2,

          });

    Use in vue pages: v-lazy instead: src
    background images use lazy loading of images

11. Use the skeleton screen: the handwritten dom element occupies the place, and the real data is replaced when it arrives. It is used when the structure of the placeholder element is not much;

12. Use less location.reload(): Because this will refresh the page, all resources on the page will re-request the server, it is recommended to use location.href="current page URL" instead, using location.href() the browser will read local cache resources ;

13. CDN (content delivery network: content distribution network) optimization

14. Reasonable use of cache;

15. Promise optimization: Promise requests are all asynchronous requests. The browser has a limit on the number of requests for the same domain in the same event. Requests exceeding the limit will be blocked. Chrome browser can send up to 6 requests to the same domain at the same time. The reason for using promise to send requests is because if all asynchronous requests are triggered at the same time, the browser will assign them execution priorities, and the order of using promise requests will be in the order we call them. If the browser assigns If so, it may appear that the request at the bottom of the page is executed first;

16. SSR server-side rendering: the server directly puts together all the content and outputs it directly, and the server uses a set of template engines;

Advantages: SEO friendly, high performance on the first screen;

Disadvantages: high client data sharing cost, high template maintenance cost;