【實踐】require.js + r.js 代碼打包壓縮初體驗

第二個分享的是學校項目所接觸到的新知識，代碼壓縮 + 代碼打包

此次的項目用了require.js 這個插件作模塊化管理的工具，所謂模塊化就是在開發的過程當中將功能劃分紅一個獨立的模塊，使代碼可讀性更強更容易維護，可是一個模塊就是一個js 文件多個模塊就會產生出多個js 文件，這對於往後項目上線是很是不利的，由於會對服務器發送屢次請求拖慢頁面加載速度，因此將多個模塊打包以及壓縮式頗有必要的一件事情。

 

閒話很少說，首先要說的是 r.js 這個優化工具，下載能夠在require.js 官網下載：http://requirejs.org/docs/download.html#rjs

大概是這個位置，點擊download 便可

r.js 要經過node.js 去驅動，沒有安裝node.js 的童鞋還須要安裝一個node.js

用 r.js 壓縮代碼 是須要一個js 文件做爲它的配置文件的，告訴 r.js 你要壓縮的模塊 ，壓縮後的文件存放在哪裏以及各個模塊之間的依賴，若是你在開發的時候用了 require.js 就沒必要再從新聲明模塊之間的依賴，省了一步功夫，我在開發過程當中用了 require,js 因此下面這裏只介紹在用了 require.js 前提下 r.js 壓縮打包代碼的方法

首先準備工做是下載一個 r.js ，在你的項目中建立一個文件夾最好和 js 文件的文件夾處在同級

展開 tools文件夾後是這樣

如今咱們先關注 build.js 這個文件，其他的稍後會介紹

build.js 就是r.js 的配置文件了，它長這樣：

baseUrl: 指定要壓縮文件的所存在的地方，這個路徑我我的理解爲相對於配置文件你的js 文件所在的位置，而個人js 文件與配置文件所在的文件夾同級因此 baseUrl的值爲： "../js"

mainConfigFile: 這是require.js 所要加載的主入口文件（data-main 引用的文件） 它把全部模塊的集中在裏面調用能夠說它依賴着全部模塊文件。而在配置文件裏，它起着相當重要的做用，全部它所依賴的模塊都會根據它裏面的依賴關係進行排列，r.js 經過這個main文件就會自動識別和它有關聯的模塊文件從而對各個模塊進行壓縮合並。若是你用的是 require.js 這個插件進行開發，寫好這個配置 你的代碼壓縮工做就已經進行了一半了而沒必要從新去整理合並模塊的依賴關係

name:  須要被壓縮的文件名。上面已經說過main 文件是依賴着全部模塊的文件，將它鎖定爲壓縮合並的目標是必然的。

out: 輸出壓縮後的文件的保存路徑。這裏不只包含壓縮後的文件的路徑以及要寫明壓縮後文件的文件名。

 

若是你的主文件中有一些第三方插件的語言文件，例如如下這個 (summernote 富文本編輯器插件中文語言插件)：

 

可能就須要修改源代碼的語言部分的代碼了，不然運行時就會報錯，這個解決辦法也是本人的暫時的解決辦法，若是有更好的解決辦法還望可以提出。

 

至此整個配置流程便完成了，貼上配置文件的代碼

({
    baseUrl: '../js',
    mainConfigFile: "../js/personalPaegMain.js",
    name: "personalPaegMain",
    out: "../js/personalPage-built.js"
})

 

接下來即是經過命令行進行壓縮代碼的最後一步程序

win + r 運行 cmd

進入你項目所在的盤符

 

輸入cd 命令 進入到盤符下項目中 r.js 的配置文件的文件夾

 

而後輸入以下命令

 

回車，執行壓縮打包

完成後即可以看到所壓縮的模塊以及最後輸出的優化文件位置，將require.js 的data-main 後面的值換成最後優化輸出的文件名便可

 

對比：

沒有壓縮打包前，瀏覽器會把全部的模塊都加載

 

而壓縮後

 

加載的文件只加載了 require.js 和 壓縮後的文件，加載量減小了一大半

 

 

 

再說說壓縮css 代碼：

在上面能夠看到壓縮css 代碼還須要增長一個 css 的文件用做導入所須要壓縮的css 代碼，配置文件以下

將你所須要合併的css 文件用 @import url(....) 來導入

 

下面是壓縮css 代碼的js 配置文件

cssIn: 是上面所說的css 導入文件

out: 壓縮後的css 代碼輸出的位置

optimizeCss: 壓縮css 代碼的方式。這裏我選擇了保持換行，由於某些瀏覽器可能識別不了不換行的某些css 代碼

貼上壓縮css 配置文件的代碼

@import url(../css/normal.css);
@import url(../css/modifypwd.css);

({
    cssIn: "../tools/buildcss.css",
    out: "../cssdist/modifyPwd-min.css",
    optimizeCss: "standard.keepLines"
})

 

 

寫好配置文件以後在命令行中輸入和壓縮 js 模塊相同的語句便可 

 

不足的地方還望你們指正