【實踐】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 模塊相同的語句即可 

 

不足的地方還望大家指正


免責聲明!

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



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