Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how the Javascript code is compressed, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

With the development of the front-end, especially the rise of single-page applications such as React,Vue, the capability of the front-end has been greatly improved, followed by the increasing complexity of the project. At this time, the front-end static resources are getting larger and larger, and there is no doubt that javascript resources are the main resources of the front-end, which is very important to compress its volume.

Why is smaller size important: smaller size means faster loading speed and better user experience for the user experience, which can also lead to greater profits for the enterprise. In addition, smaller size means less bandwidth and less server fees for servers.

When the front end builds the compiled code, you can use optimization.minimizer in webpack to compress and optimize the code. But we also need to know how it compresses the code so that we can have a deeper understanding of it when debugging the code on the console of the production environment.

How to view the volume of an asset

For the code we wrote, it is a file in the operating system, and we can see the size of the file according to the stat information in the file system.

The stat command prints information about the file system:

$stat config.js File: 'config.js' Size: 3663 Blocks: 8 IO Block: 4096 regular file Device: fd01h/64769d Inode: 806060 Links: 1 Access: (0644Maq / root) Gid: (0 / root) Access: 2020-02-13 13 Blocks 4315 44.851381702 + 0800 Modify: 2020-02-13 13:43 : 52.668417641 + 0800 Change: 2020-02-13 13 13 43 Change 52.691417262 + 0800 Birth:-

The information printed by stat is too large. If it is only used to measure volume, you can use wc-c.

$wc-c config.js 3663 config.js

How to compress the code volume?

Remove extra characters: spaces, line breaks, and comments

/ / Sum of one to two numbers function sum (a, b) {return a + b;}

First, specify an abstract problem. If it is the above code, how to compress its volume:

At this time, the file size is 62 Byte, generally speaking, Chinese will take up more space.

Extra white space characters will take up a lot of space, such as spaces, newline characters, and comments will also take up file volume. When we remove all white space compliance comments, the code volume will be reduced.

After removing the extra characters, the file size has changed to 30 Byte. The compressed code is as follows:

Function sum (aformab) {return aforb}

What happens when you replace the extra characters?

Yes, for example, pay attention to the semicolon at the end of a line when multiple lines of code are compressed into one line. This needs to be solved through the AST described below.

Compressed variable name: variable name, function name and attribute name

Function sum (first, second) {return first + second;}

As above, first and second are in the scope of the function, but they are not referenced outside the scope, so you can make their variable names shorter. But what if this is a module, the sum function will not be exported? That shortens the function name, too.

/ / Compression: Shorten the variable name function sum (xrem y) {return x + y;} / / re-compress: remove the free characters function s (xrem y) {return aquib}

In this example, when code compression (compress) is done, code mangle is also completed. However, at this time, the naming of shortened variables also needs AST support, so as not to cause naming conflicts in the scope.

Simpler expression: merge declaration and Boolean simplification

An example of a merge declaration is as follows:

/ / const a = 3 before compression; const b = 4; / / const a = 3, b = 4 after compression

An example of Boolean simplification is as follows:

/ / before compression! B & &! C & &! d & &! e / / after compression b | | c | d | | e

This example needs to parse AST even more.

AST

AST, abstract syntax tree, the minimum lexical unit after parsing of js code, and this process is accomplished through Parser.

So what can AST do?

Eslint: check your code style

Babel: compiling code to a lower version of ES

Taro/mpvue: various Mini Program frameworks that can be run on multiple ends

GraphQL: parsing client query

We often inadvertently deal with it in our daily work, such as eslint and babel, which will involve js and code. Different parsers generate different AST, the parser used by babel is babylon, while the parser used by uglify in code compression is UglifyJS.

You can directly feel it in AST Explorer [3], as shown in the following figure:

The process of compressing the code: code-> AST-> (transform) A smaller AST-> code, which is exactly the same as babel and eslint.

UglifyJS

Don't repeat the wheel!

So I found a well-known library about code compression: UglifyJS3 [4], a library for code compression confusion. So how does it perform some compression functions, such as replacing white space characters, the answer is AST.

The code compression plug-in built into webpack uses it, and its workflow is roughly as follows:

/ / original code const code = `const a = 3;` / / parse the code into AST const ast = UglifyJS.parse (code); ast.figure_out_scope (); / / convert it into a smaller AST tree compressor = UglifyJS.Compressor (); astast = ast.transform (compressor); / / convert AST into code code = ast.print_to_string ()

When you actually use it to compress the code, you only need to program for configuration, refer to the official uglify documentation [5].

{{ecma: 8,}, compress: {ecma: 5, warnings: false, comparisons: false, inline: 2,}, output: {ecma: 5, comments: false, ascii_only: true,}}

Compress the code in webpack

After knowing how code compression is done, we can finally move it to a production environment to compress the code. It's finally time to put it into practice, even though it simply calls API and adjusts the parameters.

Everything related to performance optimization can be found in optimization, an underlying uglifyjs-based plug-in for compressing JS.

Optimization: {minimize: isEnvProduction, minimizer: [new TerserPlugin ({terserOptions: {parse: {ecma: 8,}, compress: {ecma: 5, warnings: false, comparisons: false, inline: 2,}, output: {ecma: 5 Comments: false, ascii_only: true,},}, sourceMap: true})} read the above content Do you have any further understanding of how Javascript code is compressed? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.