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

This article mainly introduces how to optimize the Vue page loading for the first time, which is very detailed and has certain reference value. Friends who are interested must finish reading it!

Preface

Today, I published my blog system online, but I just threw the dist folder out of build into the root directory of the CVM, which made it very slow to enter the page for the first time. So it needs to be optimized.

Size before optimization

1. Picture optimization

In order to make it easy to open, the background image threw a jpg directly into the assets, which took more than ten seconds to load, so I uploaded the picture to the space and used the network address instead.

two。 Prohibit the generation of .map files

There are a lot of .map files in the dist folder from build, which are mainly used to help debug code online and view styles. Since most of them are debugged locally, there is no need to modify them online, so it is forbidden to generate these files.

Add this sentence to vue.config.js.

3. Routing lazy loading

\

4.cdn introduces a common library / / cdn introduces 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, and if you operate it in person, you will report an error, and some materials say that you don't need to comment and you won't pack it.

A meal to operate the last file, the effect is significant, the app.js is still very large

5. Ultimate magic weapon GZIP compression

After finishing this, it feels like the first four steps are a piece of cake, directly drying 1.4m app.js into more than a hundred kb, the rest are 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 should also match it, otherwise you won't know the GZIP file.

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

The most rubbish server through the above optimization, the same fly!

By comparison, the result is obvious!

6. Use vue-router to load pages lazily (lazy load)

The lazy loading of the page here means that if I visit page A now, I will only request something in page A, not anything else on the page.

How to do it is clearly written on vue-router 's official website. If you need to take a look at it, you can understand it:

Lazy loading of pages through vue-router

The above is all the contents of the article "how to optimize the Vue page for the first time". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.