摘要:嘗試用自己主頁的簡單代碼構建優(yōu)化下。存放和,放需要構建的項目代碼,為構建目標文件夾。我另外一篇博文構建優(yōu)化有簡單說了下,構建的命令,其實上的官網(wǎng),看有更詳細的內(nèi)容。
嘗試用自己主頁的簡單代碼構建優(yōu)化下。
在文件夾requirejs-optimizer下新建三個文件夾:tools,www和www-built。tools存放r.js和build.js,www放需要構建的項目代碼,www-built為構建目標文件夾。
www下代碼結(jié)構:
js/main-index.js為require.js的入口文件:
requirejs.config({ paths:{ jquery: "jquery.min", pikachoose: "jquery.pikachoose" }, shim:{ pikachoose:{ deps: ["jquery"], exports: "PikaChoose" } } }); requirejs(["jquery","pikachoose"],function($,pikachoose){ $("#pikame").pikachoose({ showCaption: false, transition: [7,7,8], animationSpeed: 1500 }); $("#pikame2").pikachoose({ showCaption: false, transition: [8,7,7], animationSpeed: 1500 }); });
原本jquery我是使用CDN的,構建之后出錯了,提示jquery is not defined,是因為pikachoose依賴于jquery,如果使用CDN,需要確保jquery比pikachoose先加載,但我還未找到要如何設置,所以先把jquery下載到本地,和pikachoose一起構建。
tools/build.js的配置信息:
{ appDir: "../www", baseUrl: "js", paths: { jquery: "jquery.min", pikachoose: "jquery.pikachoose" }, shim: { pikachoose: { deps: ["jquery"], exports: "PikaChoose" } }, dir: "../www-built", optimizeCss: "standard", //css優(yōu)化參數(shù)設定 modules: [ { name: "main-index" } ] }
詳細的build.js配置可以參考example.build.js,有很詳細的介紹每個參數(shù)的配置情況。我另外一篇博文require.js構建優(yōu)化有簡單說了下,構建的命令,其實上require.js的官網(wǎng),看api有更詳細的內(nèi)容。構建后www-built目錄下的內(nèi)容:
和www目錄結(jié)構一樣,除卻js和css,其他格式的文件和文件夾從www拷貝過來,不同的是,css樣式文件內(nèi)容被壓縮,main-index.js配置下用到的模塊依賴壓縮合并到main-index.js中。
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/87571.html
摘要:概述強大靈活的運用是通過配置文件決定的。下面通過示例來進行深度的探討配置文件的使用。配置文件的位置配置文件的位置和聲明用法是相對于這個腳本文件來決定的。配置文件參數(shù)的介紹所有模塊的查找根路徑。 概述 Requires強大靈活的運用是通過配置文件決定的。通過配置文件我們可以給模塊取別名、給模塊加上版本標識、設置模塊依賴、包裝非模塊等強大功能。同時RequireJS的優(yōu)化器也大量使用了配...
摘要:介紹一款模塊加載工具的入門,并且重點介紹其優(yōu)化工具。發(fā)布目錄項目源代碼工具目錄,例如構建工具等。另外,前端代碼發(fā)布前都會進行壓縮,使文件足夠小。原來是因為里了,所以優(yōu)化工具把也合并進來了。而優(yōu)化工具要用好,要多嘗試他們的配置選項。 前端變化太快,如今RequireJS已經(jīng)無法吸引眼球了。介紹一款模塊加載工具:RequireJS的入門,并且重點介紹其優(yōu)化工具。 一、RequireJS簡介...
摘要:讀不順中文文檔,對應中文文檔,自行翻譯的如果有問題錯誤,歡迎指點修改配置選項方法一在頂級頁面或頂級腳本文件沒有定義模塊的腳本文件中配置方法二在主模塊中配置缺點主模塊異步加載,多入口的話,會隨機報錯方法三在調(diào)用之前,將配置定義為全局變量配置在 讀不順中文文檔,對應中文文檔,自行翻譯的……如果有問題/錯誤,歡迎指點; 修改配置選項: 方法一、 requi...
摘要:什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面,后續(xù)請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時,將導航頁傳輸?shù)娇蛻舳耍溆嗾埱笸ㄟ^獲取數(shù)據(jù)實現(xiàn)數(shù)據(jù)的傳輸通過或遠程過程調(diào)用。 什么是單頁面應用(SPA)? 單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續(xù)請求都無需再離開此頁 目標:旨在用為用戶提供了更接近本地...
閱讀 1398·2019-08-30 12:54
閱讀 1880·2019-08-30 11:16
閱讀 1623·2019-08-30 10:50
閱讀 2459·2019-08-29 16:17
閱讀 1277·2019-08-26 12:17
閱讀 1388·2019-08-26 10:15
閱讀 2398·2019-08-23 18:38
閱讀 795·2019-08-23 17:50