directory

  • preface
  • Why optimize
  • Where to start
  • now
    • 1. Code compression
    • 2. Delete some unused pages
    • 3. Use CDN optimization
    • 4. Change the route import mode
  • The results of

preface

“This page takes too long to load!” A quiet afternoon was broken at this moment. Under the threat and temptation of my boss and PM, I began to optimize this Mountain project. Because this project has been passed to me for at least 4-5 generations, I dare not delete many things at will and cannot find the person in charge.

Why optimize?

We mainly focus on the loading speed of the first screen. In the test environment, our project actually ran very fast, but in the production environment, we used a relatively poor server in Indonesia and needed Kexue to access the Internet (there were always network fluctuations). After UI 2.0 was launched, the accumulation of things finally increased and the project became larger and larger. It is no exaggeration to say that the speed of opening the page for the first time using 4G is more than 16 seconds. According to the following table, the customer turnover rate can be inferred. However, 3G network is still used in Indonesia, which can be imagined that the turnover rate is terrible. And it’s a C-end product, so it’s more about the user experience

Churn rate of customer waiting time for pages



As a developer, how high are your requirements for homepage opening speed?

Where to start

After observing the architecture of the project, I concluded the following possible solutions

  1. Compress the code packaging
  2. Do away with previously unused components and pages
  3. Use CDN to import some resources
  4. Optimized routes and modified the import mode

For these several optimization plan, also tried again and again. The effect is really quite big just sent out for everyone to see


now

Keep in mind the three large file sizes in this picture and we will see the effect of each step of the scheme


1. Code compression

Code compression is a good option, we need to download some dependencies first

Optimize – CSS – Assets -webpack-plugin

download

npm install optimize-css-assets-webpack-plugin

Copy the code

Webpack. Config. Use js

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [

    new OptimizeCSSPlugin()

]

Copy the code

Javascript code compression (uglifyjs-webpack-plugin)

download

npm install uglifyjs-webpack-plugin

Copy the code

Webpack. Config. Use js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins: [

      new UglifyJsPlugin({

      cachetrue.// Enable caching

      paralleltrue.// enable multi-threaded compilation

      sourceMaptrue./ / whether sourceMap

      uglifyOptions: {  // Ugly parameters

        commentsfalse.

        warningsfalse.

        compress: {

          unusedtrue.

          dead_codetrue.

          collapse_varstrue.

          reduce_varstrue

        },

        output: {

          commentsfalse

        }

      }

    }),

]

Copy the code

Open the gzip

The installation

npm install compression-webpack-plugin

Copy the code

Webpack. Config. Use js

const CompressionWebpackPlugin = require('compression-webpack-plugin')

plugins: [

    new CompressionWebpackPlugin({

      asset'[path].gz[query]'.

      algorithm'gzip'.

      testnew RegExp(

        '\ \. (' +

        ['js'.'css'].join('|') +

        '$'

      ),

      threshold10240.

      minRatio0.8

 })

]

Copy the code

Nginx configuration

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";
Copy the code

Let’s see what happens


We reduced the size by almost a half in the first step


And then we look down

2. Delete some unused pages

This project had been iterated over before, which was also mentioned above, but I still made up my mind to delete them. After a series of screens were captured, I found the old staff and PM to confirm whether the page had been abandoned. This environment was time-consuming, and the following tables were confirmed one by one


After deleting these routes, I repackaged them. See below. It worked, but it didn’t work as I expected


3. Start performance optimization using CDN

We currently use the Mint UI library, vue bucket and a bunch of other things, and we find the corresponding CDN to import in index.html

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/mint-ui/2.2.9/actionsheet/index.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.common.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.22.1/vue-i18n.common.js"></script>

Copy the code

What happens after it’s introduced? Configure resources that do not need to be packaged, so we need to write in webpack.config.js

externals:{

    'vue':'Vue'.

    'mint-ui':'MINT'.

    'axios':'axios'.

    'vue-router':'VueRouter'.

    'vue-i18n':'VueI18n'.

},

Copy the code

This can be used to ignore these resources


4. Change the route import mode

Lao Yan counted 73 components of the page (excluding the previously deleted pages), and generally used the method of import introduction. When the project is packaged, all components in the route will be packaged in a JS. When the project enters the home page, all components will be loaded, so the home page load is slow

The import to introduce

import DetailActivityStatic from '@/components/discover/share/DetailActivityStatic'



export default [

    {

     path"/discover/DetailActivityStatic".

     component: DetailActivityStatic

 }

]

Copy the code

Now Lao Yan all changed to use require

export default [

    {

        path"/discover/DetailActivityStatic".

        componentresolve= > require(['@/components/discover/share/DetailActivityStatic'], resolve)

    }

]

Copy the code

This part is also a bit tired, because there are too many pages, here is the effect after packaging


We were surprised to see how much smaller JS is, but where has all this content gone? We didn’t delete it


In the js folder, we found several single JS, why?

Since require packages the components into separate JS files that are loaded on demand, this js will only be loaded when accessing the path, so you can avoid loading too much content when entering the home page.


So, at this point we are done optimizing. Let’s see the effect!


The results of

Come and see the effect!


Some careful friends will find that the app.js and vendor.js how can become smaller than just?

Because we did gzip compression in the first compression code


Now the first screen is basically controlled to float around 1-3s

Compared with the previous 16s, the PM and the boss complained, “This is too fast! Ahhh ~”