Description of the method of merging and compressing Seajs modules based on gulp

Previous projects have been built using grunt, and then requirejs was used for modularization. requirejs officially provides grunt plug-ins for compression and merging. The current project involves gulp, and seajs is used for modularization. Naturally, the issue of module merging and compression also comes to mind.

The solution to this problem was not very smooth at first. There is no particularly popular gulp plug-in on npm that is specifically used to merge and compress seajs, although it can also be seen on seajs's github. There have been a lot of issues, but most of them can only merge all module files into one total file. This is definitely no problem for single-page applications, but for multi-page applications, it obviously violates The core of modular thinking is on-demand loading, so what I want is a method that can merge on demand based on the modules each of my pages depends on.

The meaning of this on-demand merging is that on the one hand it only merges those modules that a page depends on, on the other hand it can also filter out certain modules from participating in the merge. The reason for considering this is that some modules, For example, jquery, etc., are all third-party dependent libraries. The files may be relatively large. The most important thing is that you will hardly change its code, so these modules are not merged into the js of the page, which will help to make better use of them. Browser cache. This article introduces a simple and feasible method to merge and compress seajs in small and medium-sized projects built based on gulp.

Take login.html as an example. If you look at the source file of this page, you will see that in addition to referencing seajs and the related configuration file common.js, it only references app/login as the main js of the page. This app/login module actually corresponds to js/app/login.js:

#But in fact, this login.js depends on more module js, you can Use chrome's soures to view the detailed js resources loaded by the page:

## Before login.js is merged, its code is like this :

#But in the first two screenshots, we did not see mod/mod1.js, mod/mod2.js, deps/fastclick.js. file, in addition to login.js, we also saw lib/bootstrap.js, lib/jquery.js, lib/jquery.validate.js. This is the effect of merging. On the one hand, it ensures that the modules in the js/lib folder will not participate in the merge. On the other hand, it ensures that other modules that the main js of the page depends on are merged into the main js file of the page.

1. Merging ideas

In fact, the method is relatively simple, I will introduce it last.

1) Let me first talk about the folder structure that I use to organize seajs modules. It is like this:

This structure is borrowed from requirejs, try to make the file organization as flat as possible. For small and medium-sized front-end projects, it should not be too troublesome. The functions of each folder are:

1) js/app stores the main js of each page, which is basically the logic of one js per page

2) js/deps stores Which third-party modules need to be merged into main js

3) js/lib stores which third-party modules do not need to be merged

4) js/mod stores Some js modules written by myself in each project

5) common.js is the configuration file of seajs.

2) In common.js, configure all the modules under js/lib into the alias option, because these js do not participate in the merge and need to use the browser cache. alias can facilitate us to modify or upgrade When downloading files under js/lib, update the loading addresses of these files:

base is configured to the js folder. In module development, when I want to require other modules, my habit is to directly write module identifiers such as mod/mod1 without using relative identifiers, even if the module that the module to be defined depends on exists in the same folder as it. This is also the reason why I set the base directory to the js folder, which feels a bit like the root directory of the site.

3) The idea of ​​​​merging: mainly using the two gulp plug-ins gulp-seajs-transport and gulp-seajs-concat. Although they are not very popular on github, they have solved my problem very well and are very simple to use:

(For more information, please see the beginning of this article Use the provided source code link to find the relevant gulpfile.js file)

gulp-seajs-transport can help you change the seajs module file from an anonymous module to a named module. For example, js/mod/mod1.js looks like this before building:

, but after transport processing, it will become:

This is a key point in seajs merging work. Unlike requirejs, you can directly do concat; it must first go through a transport task to turn the anonymous module into a named module, and at the same time use define's third Two parameters describe all dependencies of this module, just like requirejs. Only after transport is completed can gulp-seajs-concat be used for merging.

When gulp-seajs-concat merges, it is very simple. Just tell it a base option. This base option is consistent with the base option in js/common.js. Because gulp-seajs-concat can find other module files it depends on based on the modules after base and transport.

4) This method should be used when using main js in the page:

The parameter name of use must be consistent with the main module ID of main js after merging. For example, js/app/login.js looks like this after merging:

The module corresponding to the first define is the main module in the merged file, and the content in the red box is The id of the main module. When seajs uses this module, the parameter name must be consistent with this id. Otherwise, even if seajs successfully loads this file, it will not execute any code in the module. Because seajs has a rule: ID and path matching principle, some of which are related to this, that is: when seajs uses a file that contains multiple modules, it will search for the main module in the file based on the parameter name of use. Only they Only an exact match can be found.

5) Compression obfuscation: use gulp-uglify:

#But pay attention to the mangle, the require exports module must be excluded, otherwise it will cause some accidents The problem.

2. Summary of this article

Although the content of this article is very simple, it still took a lot of time to solve the problems of this article when I first switched to gulp and seajs. Although I was preparing the demo The progress was much smoother than my situation at that time... Anyway, I hope the content of this article can help some friends.

For more instructions on how to merge and compress Seajs modules based on gulp, please pay attention to the PHP Chinese website for related articles!