The whole process of Vue page first load optimization

Preface

Today I released the blog system I developed online, but I just threw the built dist folder into the root directory of the cloud server, which made it very slow when I first entered the page. So I need to optimize it.

Size before optimization

1. Image Optimization

In order to facilitate the development, I threw a jpg as the background image in the assets, which took more than ten seconds to load the image. So I uploaded the image to the space and used the network address instead.

2. Disable the generation of .map files

There are many .map files in the dist folder of the build. These files are mainly used to help debug the code online and view the style. Since they are basically debugged locally and do not need to be modified online, it is forbidden to generate these files.

Add this sentence in vue.config.js.

3. Routing lazy loading

\

4. CDN introduces public library

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

    //cdn import configureWebpack: {
        externals: {
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios'
        }
    }

It is said on the Internet that you can comment out the import, but if you do it yourself, you will get an error. Some information also says that it will not be packaged without commenting.

After a while of operation, the final file has a significant effect, but app.js is still very large

5. GZIP compression

After finishing this, I feel that the first four steps are a piece of cake. I directly reduced the 1.4m app.js to more than 100kb, and the rest is not worth mentioning.

 configureWebpack: config => {
        return {
            //Configure CDN
            externals: {
                'vue': 'Vue',
                'element-ui': 'ELEMENT',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios'
            },
            //Configure gzip compression plugins: [
                new CompressionWebpackPlugin({

                    test: new RegExp('\.(js|css)$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            ],
        }
    }

The server also needs to be configured, otherwise it will not recognize the GZIP file

//Configure GZIP compression module const compression = require('compression');
//Introduce app.use(compression()) before all middleware;

The worst server can still fly after the above optimizations!!!

Compare and the result is obvious!!!

6. Use vue-router for lazy loading of pages

The lazy loading of the page here means that if I visit page A now, I will only request the things in page A, and will not request the things on other pages.

The specific steps are clearly written on the official website of vue-router. You can take a look if you need it:

Implementing lazy loading of pages through vue-router

Summarize

This is the end of this article about Vue page first loading optimization. For more relevant Vue page first loading optimization content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!