Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "the performance optimization method of vue project". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope that this article "performance optimization method of vue project" can help you solve the problem.

Gzip compression

In all web foreground projects, static resources are basically placed on cdn, gzip compression is very necessary, it directly changes the size of js files, reducing by two to three times.

Refer to acceleration nginx: enable gzip and cache. The gzip configuration of nginx is very simple. Under your domain name, add the following configuration and restart the service. When the value of gzip_comp_level is greater than 2, it is not significant. It is recommended to set it between 1 or 2.

# enable gzipgzip on;# to enable gzip compression of the minimum files, files less than the set value will not be compressed gzip_min_length 1kth # gzip compression level, 1-10. The larger the number, the better the compression, and the more time it takes up CPU. The file types to be compressed by gzip_comp_level 2th # will be described in detail later. Javascript comes in many forms. The values can be found in the mime.types file. Can gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;# add Vary: Accept-Encoding to http header? it is recommended to enable gzip_vary on;# to disable IE 6 gzipgzip_disable "MSIE [1-6]\."; server cache

In order to improve the speed of the server to obtain data, it is necessary for nginx to cache static resources. If the test server should not set the cache for html, and static resource environments such as js will add a hash value at the end of the file, which can effectively achieve cache control.

Location ~ * ^. +\. (ico | gif | jpg | jpeg | png) ${access_log off; expires 30d;} location ~ * ^. +\. (css | js | txt | xml | swf | wav) ${access_log off; expires 24h;} location ~ * ^. +\. (html | htm) ${expires 1h;} browser cache

Browser caching is controlled by meta in the header file of html. Http-equiv is a header file specifically for http that returns a small amount of useful information to the browser. The corresponding content is the variable value of each parameter.

HTTP 1.0

The page cache is controlled by Pragma in HTTP1.0, which can be set to Pragma or no-cache. In the case of not letting the browser or intermediate cache server cache the page, the value is usually set to no-cache, but this value is not so safe, and Expires is usually set to 0 to achieve the goal. Expires can be used to set the expiration time of a web page. Once the web page expires, it must be retransmitted to the server to obtain new page information. PS: content must be in the time format of GMT.

HTTP 1.1

The page cache is controlled by Cache-Control in HTTP1.1, which can be set to no-cache, private, no-store, max-age, must-revalidate, etc. The default is private.

Both public browsers and cache servers can cache page information

Private cannot be resolved by a shared cache for all or part of a single customer's response message. This allows the server to describe only part of the response message of the customer, which is not valid for requests from other customers

Neither no-cache browsers nor cache servers should cache page information

No-store request and response information should not be stored on each other's disk system and caching should not be used

Must-revalidate for each request from the user, the agent server must verify to the server whether the cache is obsolete

Max-age users can receive responses whose lifetime is not longer than a specified time (in seconds)

Min-fresh users can receive responses with a response time less than the current time plus a specified time

Last-Modified and Etags

The Last-Modified server-side file response header describes the last modification time. When the browser makes a request again, the If-Modified-Since header is sent to the server to ask whether the resource can be modified after the time point, so as to distinguish the request status code between 200and 304. browser cache is selected.

Unlike Etags, ETag generates a hash string based on the content of the entity, which identifies the status of the resource. It is generated by the server to determine whether the file can be upgraded.

Reference:

Deep practice of HTTP caching

Master the cache, no longer make you unhappy and want to cry

JS subcontracting

The two parts mentioned above can be said to be backstage work. If we really consider it from the front desk, we may subcontract it. Because of the scaffolding project of vue, the configuration of webpack includes compression of js,css and html. So, when our single page is getting bigger and bigger, the first step is to subcontract.

Vue officially says that there is only 20kb after gzip compression, but your normal packaging method also has 100kb, coupled with your own logic code, the overall package size is also quite large. It directly affects the efficiency of loading the first screen page. In the following details, there are two subcontracting methods:

External excludes packages and uses cdn resources

Dll packing

Vue,vuex and vue-router

Set external in the webpack configuration file to exclude the three field packages from this operation, mainly to separate the three packages from the vendor.js.

Finally, of course, you need to add link or script with extra cdn to the html tag.

DLL packing

This packaging specifically refers to webpack's official DllPlugin and DllReferencePlugin. DllPlugin generates a code fingerprint manifest of the dll package to manage the additional packaging. During the project generation process, DllReferencePlugin will refer to the contents of manifest to package. The additional generated js files should be placed under the static folder in the files of the vue project to facilitate code deployment.

Refer to the configuration file webpack.dll.config.js in PaicFE/vue-multi.

Preload

Preloading technology (prefetch) is that we load the required resources before the customer needs it. Not all browsers support it, mainly Chrome browsers.

DNS prefetch analyzes the domain names of the resources needed on this page, and converts these domain names into IP addresses in advance when the browser is idle, thus avoiding the time of the above process when the resources are actually requested. -HTML5 prefetch

Because the process of converting a domain name to IP is a time-consuming process, DNS prefetch can reduce this part of the time.

Preloading can also play a special role for a static resource.

Pre-rendering (pre-rendering) is the next page that the customer is about to visit when the page is loaded in advance.

Vue component keep-alive

If you use a large web spa, you have a lot of router, corresponding to a lot of pages. In the fast switching of pages, in order to ensure the efficiency of page loading, in addition to the caching mechanism, the keep-alive component of vue can help.

It saves the components in the browser memory, making it easy for you to switch quickly.

Baidu's lavas project uses keep-alive components in vue-router and wraps router-view with it. The data in the components that use keep-alive will be retained, and "whether the data needs to be resynchronized" can be determined by routing the parameters in the vue-router 's hook.

Promise request

One of the features of es6 is native support for promise. Here, I won't talk about the properties of generator and aync/await in asynchronous programming. The implementation of their functions is based on promise.

The characteristics of Promise are:

Reduce callback function

Serial parallel solution

The elegance of code

In particular, ES6 can use promise or async/await to compress the request time for performance optimization. In the past, many jquery pages called interface requests for one interface and other interfaces, executed all requests serially, and finally completed the final callback function, and so on. This way of writing will directly lead to "callback hell". Even if you use vue-resource, I also review to a lot of "callback hell" situations. In order to fundamentally deal with this problem and improve development efficiency, I recommend giving priority to using promise. (async/await is in no hurry to get into use), considering that there are still many colleagues who are still developing business code efficiently.

Now that vue-resource supports the writing of promise, in order to better move the technology forward, I suggest that pagekit/vue-resource substitution be called mzabriskie/axios and webmodules/jsonp. Axios can satisfy both the server side and the browser side, and the isomorphic writing will help to develop the technology stack to SSR (server rendering) in the future. Jsonp is a library that is compatible with jsonp requests and needs to be encapsulated with promise.

Export function getJsonp (urlHost, key, data, _ params) {return new Promise ((resolve, reject) = > {let url = urlHost + key; if (data) url + = `? ${querystring.stringify ({... data, temp: new Date (). GetTime ()})}`; const params = _ params | {timeout: 15000}; if (! params.timeout) params.timeout = 15000 Jsonp (url, params, (err, res) = > {if (err) {reject (err);} else {resolve (res);}});});}

The use of Promise needs to avoid the following writing

Promise.then (function (value) {/ / success}, function (error) {/ / failure})

Use chain writing as much as possible

Promise.then (function (value) {/ / step1}) .then (function (value) {/ / step2}) .catch (function (value) {/ / failure})

The main parallel operation is Promise.all (), which can execute the array of Promise operations in parallel and then perform serial operations. Promise.race () is the result that returns the first request in a parallel request. Their use can effectively compress the time of data acquisition.

This is the end of the content on "performance Optimization methods for vue projects". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.