This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

Merging resources (HTTP Concat)

As mentioned above, you can download multiple files using a single TCP Connection using Connection: keep-alive. Around 2012, Taobao’s engineers came up with a way to package multiple files into one. Assume that the CSS files used on the page are 1.css, 2.css, and 3.css. The corresponding codes are as follows:

<link href="http://cdn.taobao.com/1.css" rel="stylesheet">
<link href="http://cdn.taobao.com/2.css" rel="stylesheet">
<link href="http://cdn.taobao.com/3.css" rel="stylesheet">
Copy the code

Taobao’s front end thought of the way is to write the code:

<link href="http://cdn.taobao.com/??1.css,2.css,3.css" rel="stylesheet">
Copy the code

However, this optimization approach is now obsolete because modern front-end tools such as Webpack already provide the ability to package multiple files into a single file, and there is no need to reinvent Nginx.

Merge images (CSS Sprites)

The above mentioned file merges directly, but obviously image files can’t be added directly like strings, so the front end programmer invented Sprite diagrams. The principle is very simple:

  1. Use graphics software to assemble a large picture from ten pictures.
  2. Then use CSS background-Position to position the image to show different parts in different divs.

Some Grunt /gulp/webpack plug-ins do this automatically. The obvious benefit of merging images is also to reduce the number of HTTP requests.

Inline Resource

In companies where HTTP/2.0 was not yet commonplace, programmers often tried to make resources load faster by embedding them in HTML to greatly reduce the number of HTTP requests and thus the number of TCP connections. Such as:

  • the<link href="style.css" rel="stylesheet">to<style> Insert style. CSS file contents </style>.
  • the<script src="main.js"></script>to<script> Embed main.js file contents <script>.
  • the<img src="1.png">to<img src="data:image/png; base64,iVBORw0... %3D">.

The idea behind the automated script is simple: scan the HTML during the packaging phase, and once you find resources that are inline, read the contents of the file and replace the original tags. Image files can be inlined as base64 strings. The Webpack community provides many plug-ins to implement these functions.

But there are drawbacks to this approach:

  1. Once resources are inlined, there is no possibility of downloading them in parallel. So in practice, we only inline small files (say, less than 4Kb) and try to download large files in parallel.
  2. These inline files cannot be cached by the browser alone; if any character changes, the previous cache is invalidated and the new file has to be redownloaded in its entirety.

In addition, Webpack will try to make each file larger than 20Kb when doing code split to prevent too many small files

Enable Compression (Gzip)

If we compress the body of the HTTP response first (reducing the size of bytes by about 30% to 60%) and then decompress it after the browser receives it, the transfer rate will increase considerably.

It’s as simple as adding gzip on to your Nginx configuration.

Code minimizing (Minify)

Var userName = ‘frank’; Console. log(userName) and var a = ‘frank’; Console.log (a) is actually equivalent, so someone came up with a way to replace the original code with shorter code. Webpack turns this on by default in production, so no additional configuration is required.

But there are even more powerful code simplification tricks, such as:

  • HTMLMinifier can simplify HTML.
  • Cssnano can simplify CSS code.
  • TreeShaking technology can further simplify JS code.
  • Svgo can simplify SVG files.
  • Imagemin can simplify image files.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.