AngularJS結合RequireJS做文件合並壓縮的那些坑


我在項目使用了AngularJS框架,用RequireJS做異步模塊加載(AMD),在做文件合並壓縮時,遇到了一些坑,有些只是解決了,但不明白原因。

那些坑

1. build.js里面的paths必須跟main.js里面的保持一致。

這個build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件。在合並壓縮時候,build.js文件里面也需要寫paths,而且還是跟main.js一樣,我很奇怪為什么就不能識別main里面的require.config的paths,省得合並的時候還要將paths拷貝過來(我試過build.js里面沒有paths,是不能合並的)。(-_-!!!)

2. 某些依賴庫需要寫整個相對路徑才能做合並。

在項目里, 我使用一個叫layer的第三方庫(庫是以requireJS define寫的),一開始只做開發時候,在paths配置了路徑后,使用此庫只需要用個簡稱(define依賴時候)。 但在做合並時候,竟然提示文件不存在(因為直接拿簡稱去拼文件地址了),無奈之下只能修改這個庫的使用辦法,全部使用到這個庫的都寫整個相對路徑,這個時候開發和做合並才沒有錯。

3. 合並之后可以運行,加上壓縮就不可以。

這個是最嚴重問題,最嚴重問題,最嚴重問題。在文件合並壓縮后,使用文件時候,AngularJS運行就不正常了,總是報模塊初始化失敗,Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e,如下圖。 

很關鍵的一個點就是,不壓縮可以用,一旦壓縮了(用了默認的壓縮),使用就會報錯。所以思考必定某些東西被“壓壞”了,網上某些文章都說是需要下面這樣寫AngularJS cntroller、directive等,使用的服務用字符串定義。

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

可是我的整個應用就是這樣定義,並沒有給它注入錯誤的機會。最后在無奈之下,就只能配置mangle: false,不混淆變量名,這樣做后,合並壓縮的文件就能正確使用了!!!

PS:簡單說法就是,合並壓縮可以,變量名不能混淆(總覺得怪怪的),感覺問題暫時無解。

4. 第二層的require,做合並的時候,是合並不出來。

例如在mian.js里面這樣加載模塊,在合並時候會發現第二層的require並沒有被合並到。

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

這時需要在build.js加findNestedDependencies: true, 這時才會合並第二層。

合並准備

安裝nodejs

文件合並壓縮基於nodejs,所以先安裝nodejs,下載地址: http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/

下載r.js

r.js配合requirejs模塊寫法對文件進行合並,壓縮,下載地址: https://github.com/jrburke/r.js

簡單配置

配置文件最好寫一個build.js,如下:

({
     baseUrl:"../",
     paths: {
         //...
     },
     shim: {
         //...
     },
     optimize: "uglify2",
     uglify2: {
        mangle: false  //false 不混淆變量名
     },
     findNestedDependencies: true,
     name: "js/main",
     out: "../js/main-built.js"
})

這里就講幾個關鍵屬性:

baseUrl:所有的模塊(般就是js)都相對於這個路徑存在。

optimize:優化腳本文件的方式,有下面5種取值方式。

  • uglify:(默認) 用UglifyJS壓縮。
  • uglify2: 用UglifyJS2( 2.1.2+)壓縮。
  • closure: 使用Google's Closure Compiler 簡單優化模式壓縮文件, 僅在優化工具使用Java有效。
  • closure.keepLines:跟closure參數一樣, 只不過保留換行符。
  • none: 不做壓縮。

findNestedDependencies:尋找require()里面的require或define調用的依賴。

PS:配置屬性還有很多,就不一細細說了,有篇文章寫得很詳盡,地址:http://segmentfault.com/a/1190000002403806#articleHeader37

當文件配置好后,就執行命令合並壓縮

node r.js -o build.js

總結 

RequireJS模塊的合並壓縮還是比較簡單的,但是遇到AngularJS,在壓縮方面就有些問題了,目前沒找到什么更好辦法。

 

本文為原創文章,轉載請保留原出處,方便溯源,如有錯誤地方,謝謝指正。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM