In the current network environment, when users visit web pages, it is acceptable if the first screen is within 3S, but if the first screen is more than 10S, most users will not continue to wait, which will lead to the loss of users, which is unacceptable for individuals or enterprises. Therefore, first screen optimization has become an indispensable part of web pages.

The following optimizations are for Vue 2 X frame

Optimization method:

(1) Route lazy loading

Because Vue is a single page application, all resources will be loaded when it is loaded for the first time. Too many resources will lead to slow download speed, which directly affects the first screen time of the page. When the network is poor, the page will not be opened for a long time. All routes can be lazy loaded. Lazy loading means that the resources under the current route can be loaded first, Wait until another route is switched, and then load the corresponding resources. If fewer resources are loaded, the speed will be faster.

(2) Close ProductionSourceMap

productionSourceMap is used for debugging errors in the development environment. It can be accurate to which line reports errors. It is a good tool for us to locate errors in the development process. However, it does not need to be opened in the production environment. Instead, opening it in the production environment may lead to our source code leakage. Therefore, we can close productionSourceMap in the vue configuration, as follows

productionSourceMap: false

(3) Turn on Gzip compression

If the project is large, the file generated after packaging will be large. If a large file needs to be read every time the page is loaded, the loading time will become longer. Therefore, the packaged file needs to be compressed:

//Set in vue configuration
productionGzip: true,
//In the nodejs project's app JS code
var compression = require('compression')
var app = express();
// Enable gzip
app.use(compression());

//It also needs the cooperation of nginx
#gzip
gzip on; #Turn gzip on or off
gzip_static on;
gzip_disable "msie6"; #Do not use gzip IE6
gzip_min_length 1k; #The minimum file size of gzip compression exceeds that of compression (self-adjusting)
gzip_http_version 1.1;
gzip_buffers 4 16k; #The buffer does not need to be modified
gzip_comp_level 7; #Compression level: 1-10. The larger the number, the better the compression and the longer the time
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript; # Compressed file type
gzip_vary on; #Related to Squid and other caching services, if on, add "vary: accept encoding" in the Header
 After configuration, the file size can be compressed to half or more of the source file, which greatly improves the loading speed of web pages.

(4) Turn on http2

In order to ensure the security of data transmitted by the website, we need to configure to upgrade HTTP to https (http+ssl). Because of various problems such as security verification, https will not establish a connection as fast as HTTP, so we can upgrade http1.1 to http2, and the loading speed of http2 can be increased by more than 50%

(5)CND acceleration

The full name of CDN is Content Delivery Network, that is, content distribution network, which can enable users to obtain the required content nearby, reduce network congestion and improve user access response speed and hit. When doing vue projects, you may habitually use main JS, such as:

import Vue from 'vue'
import Vuex from 'vuex'
import element from 'element-ui'

In this way, the imported components or plug-ins are installed in the project through npm, which will cause the page loading speed to be very slow. The entire component library imported like elementUI is very large. We can change elementUI to import on-demand, for example:

import {
Card, Container, Header, Main, Aside,
Footer, Button, Menu, MenuItem, MenuItemGroup,
Submenu, Row, Col, Tag,Link,Icon,Drawer,Avatar,
Progress,Dialog,Input,Form,FormItem,Tooltip,Pagination,
Timeline,TimelineItem,Message,Dropdown,DropdownItem,DropdownMenu,
Upload,MessageBox,Alert,Breadcrumb,BreadcrumbItem,Backtop,Badge,
Tabs,TabPane,Popover
} from 'element-ui'

After the on-demand import, the file size can be effectively reduced, but the access speed is not ideal and can not meet the requirements. At this time, all these imports can be replaced by CDN connection, for example:

index.html Introduced in
<!-- vue2 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
<!-- vuex -->
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.js"></script>
<!-- introduce elementUI Component library -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
/*Set main JS, otherwise the import ed components or plug-ins will be packaged during packaging
 In addition, you need to configure externals in the vue configuration file*/
externals: {
'vue': 'Vue',

'vue-router': 'VueRouter',

'ElementUI': 'ELEMENT',

'axios': 'axios',

}

It should be noted that vue must be at the top. After it is introduced in the form of CDN, the access speed can be improved a lot. In addition, we can upload some static resources such as pictures, JS and CSS to a third party (such as qiniu cloud and Tencent cloud), and then access them in the form of CDN. The speed can also be improved a lot.

(6)js import location problem

Page loading page is loaded from top to bottom. When js is loaded, it will block the loading of other resources until js is loaded. Therefore, js can be loaded last to ensure that dom can be rendered successfully, as follows:

<body>
    <div id="app" ></div>
    <!-- introduce Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
    <!-- introduce Vuex -->
    <script src="https://xwjblog.cn/cdn/vuex/3.6.2/vuex.js"></script>
 </body>

If you need to put the script in the head, you can add asynchronous async or defer to the script:

<head>
    <!-- introduce Vue -->
    <script defer src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
    <!-- introduce Vuex -->
    <script defer src="https://xwjblog.cn/cdn/vuex/3.6.2/vuex.js"></script>
</head>

(7) Lazy loading of pictures

Lazy loading of pictures means delayed loading of pictures. When visiting a page, the pictures in the visual area shall be loaded first, and the remaining pictures shall be loaded when necessary. This can reduce network requests and avoid requesting too many resources when opening the page.