Be careful! AngularJS and RequireJS are used to merge and compress files. angularjsrequirejs

Be careful! AngularJS and RequireJS are used to merge and compress files. angularjsrequirejs

The AngularJS framework is used in the project, and RequireJS is used for asynchronous module loading (AMD). When file merging and compression is performed, some pitfalls are encountered, but some problems are solved, but the reasons are not clear.

Those pitfalls
1. The paths in build. js must be consistent with that in main. js.

This build. js is the configuration file used by r. js, and main. js is the main file of RequireJS. Build. in the js file, you also need to write paths, which is also consistent with main. like js, I wonder why the require in main cannot be identified. config paths, save the need to copy paths when merging (I tried to build. js does not contain paths and cannot be merged ). (-_-!!!)

2. Some Dependent libraries must write the entire relative path before merging.

In the project, I used a third-party library named layer (the Library was written in requireJS define). When I started development, after paths configured the path, to use this library, you only need to use the short name (define dependency ). However, during the merge operation, the system prompts that the file does not exist (because the address of the file is directly used to spell the file address). However, you can only modify the usage of this database, all those used in this database write the entire relative path, so there is no error in development and merge.

3. It can be run after merging, but cannot be executed after compression.

This is the most serious, most serious, and most serious problem. After files are merged and compressed, AngularJS is not running normally when files are used. It always reports module initialization failure,Failed to instantiate module common due to: Error: [$ injector: unpr] Unknown provider: e, Such.

The key point is that it can be used without compression. Once it is compressed (the default compression is used), an error will be reported. Therefore, some things must be "crushed". Some articles on the Internet say that AngularJS cntroller, directive, and so on need to be written below. The services used are defined by strings.

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

However, my entire application is defined in this way and there is no chance to inject errors into it. In the end, you can only configure mangle: false without obfuscation of variable names. after doing so, the merged and compressed files will be correctly used !!!

PS: Simply put, merge and compress are acceptable, and variable names cannot be confused (strange). I feel that the problem is not resolved for the time being.

4. The require on the second layer cannot be merged during merge.

For example, if a module is loaded in mian. js, the second-layer require is not merged.

require([ "COMMON"], function(){  require([ "angular", "LOGIN" ], function(angular){   //....  });});

In this case, you need to add findNestedDependencies: true in build. js to merge the second layer.

Merge preparation

1. Install nodejs

File merging and compression are based on nodejs, so install nodejs first.

2. Download r. js

R. js works with the requirejs module to merge and compress files.

Simple configuration

It is best to write a build. js file as follows:

({BaseUrl :".. /", paths :{//...}, shim :{//...}, optimize: "uglify2", uglify2: {mangle: false // false do not confuse variable name}, findNestedDependencies: true, name: "js/main", out :".. /js/main-built.js "})

Here we will talk about several key attributes:

BaseUrl: all modules (such as js) are relative to this path.

Optimize: optimizes script files in the following five methods.

• Uglify: (default) Use UglifyJS for compression.
  
• Uglify2: Use UglifyJS2 (2.1.2 +) for compression.
  
• Closure: uses Google's Closure Compiler to compress files in simple optimization mode, which is only valid when the optimization tool uses Java.
  
• Closure. keepLines: Same as the closure parameter, only line breaks are retained.
  
• None: Do not compress.

FindNestedDependencies: Find the dependencies of require or define calls in require.

PS: there are still many configuration attributes, so I will not elaborate on them. After the file is configured, execute the command to merge and compress

node r.js -o build.js

Summary

The merge and compression of the RequireJS module is relatively simple, but there are some problems with AngularJS in terms of compression. At present, there is no better solution.

The above is the detailed content of this article, hoping to help you learn.

Articles you may be interested in:

• High-performance WEB development JS and CSS merging, compression, and Cache Management
• How to Use UglifyJS to merge/compress JavaScript
• Using GruntJS to build Web programs and compress them together
• How to merge and compress js and css optimized by Asp.net