Three ways to merge front-end js files _ basic knowledge

The following is a small series of recommendations on how to merge front-end js files. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at how to merge the front-end js files. Of course, there are not files that cannot be merged, but files that can be merged. There are only three ways to think about it.

The three methods are as follows:

1. A large file. All js files are merged into a large file, and all pages reference it.

2. Large files on each page are merged to generate a large file of your desired js.

3. Merge multiple shared large files and Merge multiple shared js files according to actual conditions. Each page references multiple shared large files.

In my opinion, merging has two purposes:

1. To reduce the number of requests.

2. Code security considerations (the more files are allocated, the easier it is to see ).

PS: note that I am not talking about compression obfuscation, but merging.

1. A large file

In this way, all js files are merged into a large file, and all pages reference it, even if some code may not be used.

Advantages:

(1) Merge is simple and easy to use.

(2) Other pages can be loaded Using Cache Optimization.

Disadvantages:

(1). The page may load code that is not used on this page.

Unsuitable scenarios:

(1). This method certainly does not apply to large Web applications. regardless of the amount of code in a single file, we are not allowed to do this in terms of business complexity (I have never seen that website do this ).

Applicable scenarios:

(1 ). hybrid applications are ideal for both Mobile Hybrid applications and PC Hybrid applications (desktop applications, similar to the youdao team development framework hex + chromium + nodejs, in itself, there will be no request speed issues, and the code security of this client-side code application is more important.

PS: Of course, the most important thing is the backend security. Whether the front-end is cracked or not, whether the backend completes the input verification and whether to prevent unauthorized access, the backend is the key, that is to say, "Do not trust any user input ".

2. Large files on each page

Various pages are merged to generate a large js file, and multiple JavaScript files are merged.

Advantages:

(1). Every page uses the most precise js, and no irrelevant code exists.

Disadvantages:

(1). The number of pages will generate multiple JavaScript codes, resulting in a large number of common js Code redundancy.

(2). cache-optimized loading cannot be used for shared parts.

(3). Merging and using will be relatively complicated.

In this way, I always think that something is wrong. A small application can handle a single large file, but a large application won't do this, nor can it be used on a Hybrid application. In this case, the installation package size is very important, redundant code is not allowed. When I think about various scenarios, I find that it can be solved in the above or below ways, and it is better, so I think this method is a weakness.

3. Merge multiple shared large files

Merge multiple shared large files (for example, dependent database classification) based on actual conditions, and then merge the js files required on this page (for example, by business classification ), each page references one or more js files that share large files and the current page.

Advantages:

(1). the shared part is loaded and optimized, and each page reference is not redundant as much as possible.

Disadvantages:

(1). Some pages still reference unnecessary code. Sharing is not completely shared.

Applicable scenarios:

(1). Large and small applications are applicable, and many shared parts may exist on each page. Reasonable file splitting is critical.

Summary

This document is just a reflection and a general discussion. There are many file merging methods, which are dynamically generated by the backend or directly generated by tools (grunt + requirejs). The above three merge methods also depend on our practical needs.

Merging is very important, but it does not advocate that all files should be merged, so they cannot be merged. Some files alone are better, depending on specific scenarios.

The above three methods for merging front-end js files are all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support me more.