源碼出售

可視化的WEUI小程序工具-r.js壓縮代碼

HTML我幫您打造微信應用號小程序開發工具,傻瓜化、拖拽式操作即可生成應用號小程序,功能模塊組件化,無需開發快速生成應用號小程序。微信小程序開發工具, 集成小程序所有組件,在線可視化UI設計。支持基本動畫設定,滿足全自由度設計,可導出標準代碼供后續開發。

目前根據 WEUI組件庫做好了頂部菜單、底部菜單、FLEX布局、九宮格、面板、圖文列表、按鈕、單行文本框、多行文本框、單選列表、多選列表、下拉列表、開關選 擇等組件庫。可以輕輕松松快速生成WEUI原型。

使用技術:requirejs+backbone+underscore+jquery+jqueryui+bootstrap+weui等技術。

HTML我幫您打造拖拽可視化的WEUI小程序工具(2)

HTML我幫您打造拖拽可視化的WEUI小程序工具(2)

為什么選型requirejs?
RequireJS 是一個JavaScript模塊加載器。它非常適合在瀏覽器中使用, 它非常適合在瀏覽器中使用,但它也可以用在其他腳本環境, 就像 Rhino and Node. 使用RequireJS加載模塊化腳本將提高代碼的加載速度和質量。
由于工具涉及到組件比較多樣化,這個工具可以將你的JavaScript代碼輕易的分割成苦干個模塊(module)并且保持你的代碼模塊化與易維護性。這樣,你將獲得一些具有互相依賴關系的JavaScript文件。僅僅需要在你的HTML文檔中引用一個基于RequireJS的腳本文件,所有必須的文件都將會被自動引用到這個頁面上.

不說模塊化開發細節,在項目開發完成后,需要上線,但是模塊太多了,一個個加載肯定不符合前端優化的要求。這會導致很多次請求(requests),即使這個些文件都很小,也會浪費很多時間。 可以通過合并這些腳本文件,以減少請求的次數達到節省加載時間的目的。

前端的優化原則是減少請求,合并壓縮。那么寫那么多的模塊最后可定是要合并壓縮起來的。這里就需要用到 RequireJS提供的r.js。r.js可以在安裝RequireJS后的bin目錄下可以找到。

r.js壓縮代碼常用的配置及命令


1. js的壓縮

這次只是初步應用,如果有好的方法或有誤的地方,還望各位大俠們指教.

第一種配置的文件: 需要把所有依賴的文件都壓縮到當前代碼中.


({
   baseUrl: "./",
   paths: {
       amd_modules: "../amd_modules",
       lib : "../lib"
   },
   name: "main",
   optimizeCss: "none",
   out: "index-built.js"
})



baseUrl: 指當前配置文件的路徑

paths: 配置一些下面配置時需要的路徑

name: 需要被壓縮的文件

optimizeCss: none不壓縮, standard標準壓縮

out: 輸出的文件

第二種配置的文件,去掉常用的庫(單引用)


({
    mainConfigFile : "main.js",
    baseUrl: "./",
    paths : {
        amd_modules: "../amd_modules" ,
        lib: "../lib"
    },
    dir: "built",
    keepBuildDir: false,  //不復制依賴文件
    
    modules: [
        {
            name: "main",
            exclude: ["amd_modules/jquery/1.8.3/jquery", "lib/header/0.0.1/header"]
        }
    ]
})


dir: 輸出目錄的路徑

modules: 壓縮合并的模塊,exclude: 篩選掉的文件,不被壓縮到main的壓縮文件里

執行代碼:


node r.js -o config.js


2. css的壓縮

第一種情況,直接壓縮某個文件,執行代碼

node r.js -o cssIn=index.css out=built/index.css

第二種情況,壓縮多個文件

需要先將要壓縮的文件放到一個css中,用@import引入,如下所示:存儲文件為main.css

@import url("icons.css");
@import url("window.css");
@import url("tabs.css");
@import url("index.css");

執行代碼:(標準壓縮)

node r.js -o cssIn=main.css out=built/main.css optimizeCss=standard

先貼到這里,其實js壓縮里有很多配置項,除上述配置外,比如如果有cdn引入的js如何配置; 需要壓縮成多個文件等等; 還有壓縮時需要包含那些文件和排除那些文件等等.





相關鏈接

發表評論

腾讯彩票兑奖