Recently, I am thinking about how to merge front-end js files. Of course, it does not include files that cannot be merged, but files that we can merge. After thinking about it, there should be only three ways.
The three methods are as follows:
1. A large file, all js merge into one large file, and all pages refer to it.
2. Each page is large file, and each page merges to generate the large file of your own js.
3. Merge multiple shared large files, merge multiple shared js files according to practice, and each page refers to multiple shared large files.
In addition, in my opinion, merge has two purposes:
1. To reduce the number of requests.
2. Code security considerations (the more files are divided, the easier it is to be seen clearly).
PS: Note that what I'm talking about is not compression confusion, just merge
1. A large file
This way is to merge all js into a large file regardless of the situation, and all pages refer to it, even if some code may not be used.
advantage:
(1). It is simple to merge and easy to use.
(2). Other pages can be loaded using cache optimization.
shortcoming:
(1). The page may be loaded into codes that are not used in this page.
Not applicable scenarios:
(1). This method is definitely not suitable for large web applications, and regardless of the amount of single-file code, the complexity of the business does not allow us to do this (I have never seen that website do this).
Applicable scenarios:
(1). Hybrid applications, whether they are Mobile's Hybrid applications or PC's Hybrid applications (desktop applications, similar to Youdao team development framework hex+chromium+nodejs), are very suitable, and there will be no request speed problems. The code security of such applications located in client code is more important.
PS: Of course, the most important thing is the security of the backend. Regardless of whether the frontend is cracked, whether the backend improves input verification, and whether it prevents overreach of authority, the backend is the key, which means that the saying "Don't trust any input from the user."
2. Large files on each page
Merge each page to generate a large file of your own js, and generate multiple js merges.
advantage:
(1). Each page uses the most accurate js and there will be no irrelevant code.
shortcoming:
(1). There are many pages, multiple js will be generated, resulting in a large amount of redundancy in common js code.
(2). The shared part cannot be loaded using cache optimization.
(3). Merging and use will be relatively complicated.
I always think something is wrong with this method. Small applications can handle it directly with a large file, and large applications will not do this, and they cannot be used on Hybrid applications. In this case where the installation package size is important, redundant code cannot be tolerated. When I was thinking about various scenarios, I found that it could be solved using the above or below methods, and it was better, so I think this method is useless.
3. Merge multiple shared large files
According to practice, merge multiple shared large files (such as dependency library classification), and merge the required js files (such as business classification), each page refers to one or more shared large files and the js files of this page.
advantage:
(1). The shared part is loaded and the references to each page are as high as possible without redundancy.
shortcoming:
(1). There will be more or less certain pages that will reference unwanted code, and sharing is not a complete sharing.
Applicable scenarios:
(1). Both large and small applications are more suitable. Each page may have many common parts, and reasonable file merging will be very critical.
Summarize
This document is just a thought and is just a general discussion. There are many methods for file merging, which are dynamically generated by backend or directly generated by tools (grunt+requirejs). The above three methods of merging are also determined by our practical needs.
Merging is very important, but it is not recommended that all documents be merged. Some documents cannot be merged. Some are better for individual documents, but it depends on the specific scenario.
The above three ways to merge front-end js file are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.