SPA first screen loading optimization in Vue (detailed tutorial)-JS Tutorial-php.cn

SPA first screen loading optimization in Vue (detailed tutorial)

亚连

Release： 2018-06-20 15:59:07

Original

2491 people have browsed it

This article mainly introduces the practice of Vue SPA first screen loading optimization. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look

Written in front

This article records some of the pitfalls and optimization solutions that the author encountered during the first screen loading optimization process of the Vue SPA project !

We take the vue-cli tool as an example, use vue-router to build a SPA application, select element-ui as the UI framework, select axios as the ajax solution, and introduce vuex, and use vuex-router-sync to synchronize the router to the store. , the server uses the local Nginx service.

Build the project

vue-init webpack vue-spa-starter-kit
cd vue-spa-starter-kit
npm install
npm install vuex element-ui axios -S
npm run dev

Copy after login

vue-cli will automatically open the browser and you can see the effect. We introduce vue-router, element-ui, axios

// src/main.js
import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Copy after login

in the entry file. Next, we do not make any modifications and use the default configuration for packaging. Nginx uses the default configuration, deploys to Nginx, and starts the Nginx service. View the effect:

# It can be seen that vendor.js has 788kb without developing any pages and functions. If we rely on some other libraries, such as echarts, etc., vendor.js can reach more than 1M.

Use CDN resources

We need to separate vue, vue-router, vuex, and element-ui from vendor.js and use CDN resources to introduce them. It is recommended to use BootCDN for domestic CDN services. It is not very useful abroad. . .

First add the following content to the template file index.html:

...
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.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/element-ui/2.0.7/index.js"></script>
 <!-- built files will be auto injected -->
</body>

Copy after login

Modify build/webpack.base.conf.js. Please refer to the relevant information for the externals configuration item.

module.exports = {
 ...
 externals: {
  &#39;vue&#39;: &#39;Vue&#39;,
  &#39;vuex&#39;: &#39;Vuex&#39;,
  &#39;vue-router&#39;: &#39;VueRouter&#39;,
  &#39;element-ui&#39;: &#39;ElementUI&#39;
 }
 ...
}

Copy after login

Modify src/router/index.js

// import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
// 注释掉
// Vue.use(VueRouter)
...

Copy after login

Modify src/store/index.js

...
// 注释掉
// Vue.use(Vuex)
...

Copy after login

Modify src/main.js

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import axios from &#39;axios&#39;
import store from &#39;./store&#39;
import router from &#39;./router&#39;
import {sync} from &#39;vuex-router-sync&#39;
import ELEMENT from &#39;element-ui&#39;
// import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.config.productionTip = false

Vue.use(ELEMENT)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 store,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

Copy after login

Notice! Here the element-ui variable name should use ELEMENT, because the umd module name of element-ui is ELEMENT

Package it again and deploy it to the Nginx service. You can see:

vendor.js is reduced to 112kb, an increase of 85.5%!

Looking at the CDN resources again:

It can be seen that the five requests total 216kb and took 619ms!

Nginx turns on gzip

We have finished optimizing vendor.js. Next, we optimize the resources on the server. First look at the effect of not turning on gzip:

You can see 13.5kb

Nginx turns on gzip, modify the nginx configuration file nginx.conf:

...
http {
  ...
  gzip        on;
  gzip_min_length  1k;
  gzip_buffers    4 16k;
  #gzip_http_version 1.1;
  gzip_comp_level  2; # 压缩级别
  # 要压缩的mine类型
  gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
  gzip_vary     off;
  gzip_proxied    expired no-cache no-store private auth;
  gzip_disable    "MSIE [1-6]\."; # IE6不支持gzip
  ...
}

Copy after login

About nginx gzip, please check the relevant information yourself

Restart the nginx service and see the effect:

You can see the resources on the server After gzip compression, it is 9kb, with a compression ratio of 13.3%.

Summary

At this point, our preliminary optimization is completed. The first screen loading time of my actual project was optimized from about 12s to about 4s. Since it is a demonstration project and no other pages and functions have been developed, the effect is not very obvious. You can make mistakes on your own. Everyone has a better solution and can learn from it together!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement automatic numerical increment in JavaScript

How to use Redux in React projects (detailed tutorial)

How to implement random layout waterfall flow in ionic3

How to implement the return to top effect in JS

How to implement element scroll bar loop to append content in JavaScript

The above is the detailed content of SPA first screen loading optimization in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!