Front-end performance optimization-resource consolidation and compression

1 Consolidation and compression of resources

Resource consolidation => reduce the number of http requests

Resource compression => reduce the size of the requested resource

2. Compression

2.1 Html compression

HTML code compression is to compress these characters that make sense in the text file (meaning when editing the code), but characters that are not displayed in HTML, including spaces, tabs, line breaks, etc., and some other meaning characters, such as HTML Comments can also be compressed.

2.2 Css compression

• Invalid code removal

• Css semantic merge

2.3 Js compression and confusion

• Delete invalid characters, such as carriage returns, spaces

• Remove comments

• Code semantic reduction and optimization, such as shortening the length of some variables, optimization of invalid code

• Code protection, js compression makes the code confusing and unreadable

• Delete log

In general, the meaning of CSS and JS compression is more meaningful than HTML

2.4 How to compress

1. Use online website compression
2. Use some compression tools, such as html-minifier provided by node.js to compress html
3. Use build tools such as grunt, glut, webpack, etc.
4. Now most of them use webpack to build and compress

3 File merge

As shown above

Defects that do not merge

1. There is an upstream request inserted between files, increasing N-1 network delay
2. More affected by packet loss
3. May be disconnected when passing through a proxy server

Problems after the merger

1. The problem of the first screen rendering is obviously that the merged file will be larger than before the merge. If the rendering depends on js, if the js request is slow, it will have an impact.
2. Cache invalidation problem Any one of several merged js has a change, it will cause changes in the merged file, will cause the merged js to fail, the previous may only cause a.js to fail

How to optimize

• The public library merges a file, the merge of business code, the public library does not change much
• The merge of different pages, single-page application, when routing to a page, only to load this page
• The number of concurrent requests under the same domain name of the browser is limited, and in this respect, merge is necessary
• Open gzip