require.js構建優化

yacheng 發布于2019-08-21 12:22 / 654人閱讀

摘要：未構建之前，全部分開加載。的優化，得再看下的示例，然后再寫篇筆記記錄下來。

想摸透javascript模塊化編程是怎么一回事，在seajs和requirejs之間兜兜轉轉，看了許多相關資料和文章，算是大致理清它們的異同，撇開requirejs加載方式的另類（其實目前我暫時還沒去感受），于寫法，比較喜歡requirejs的寫法，這個比較主觀，這也得益于阮一峰大大那篇Javascript模塊化編程（三）：require.js的用法，講得很清楚，反而我看seajs的文檔，反而迷迷糊糊。

其實模塊化編程不難理解，主要我還是卡在了構建工具，壓縮合并的優化上，雖然seajs官網上有很多相關教程，但我就是不理解，簡直被自己蠢哭了。后來看到requirejs上有例子，就決定啃英文教程試一下。

需要用到node和npm，我直接在github上clone了requirejs的例子create-template-master所以可以跳過r.js的安裝:

npm install -g requirejs
r.js -o app.build.js

例子已經有build.js，app目錄也已經搭建好，所以只需要下面一條命令，就自動幫你構建了。

node r.js -o build.js

build.js是命令行配置參數文件，所以可以把build.js里面的配置參數直接寫在上面那條命令的后面。like this：

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

看下build.js里面怎么寫：

{
    "appDir": "../www",     //待構建文件目錄
    "baseUrl": "lib",       //和require.js里面基目錄（baseUrl）一樣
    "paths": {              //路徑指定，如下用app代替../app  
        "app": "../app"
    },
    "dir": "../www-built",  //構建目標文件目錄
    "modules": [            //這個應該是模塊配置，name表示入口文件
        {
            "name": "app"
        }
    ]
}

這是構建的log：

可以對比一下構建前后，打開www/index.html和www-built/index.html的js加載有什么不同。
未構建之前，全部js分開加載。

構建之后，只需要加載require.js和app.js。

構建之后，js已經是壓縮合并的了，main.js，messages.js和print.js都合并到了app.js里面。

css的優化，得再看下require.js的示例，然后再寫篇筆記記錄下來。

GPU云服務器云服務器 require.js 網站構建數據構建對象構建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87557.html

使用require.js構建優化項目實踐

摘要：嘗試用自己主頁的簡單代碼構建優化下。存放和，放需要構建的項目代碼，為構建目標文件夾。我另外一篇博文構建優化有簡單說了下，構建的命令，其實上的官網，看有更詳細的內容。嘗試用自己主頁的簡單代碼構建優化下。在文件夾requirejs-optimizer下新建三個文件夾：tools，www和www-built。tools存放r.js和build.js，www放需要構建的項目代碼，www-b...

anRui 2019-08-21 12:23 評論0 收藏0
【前端構建】RequireJS及其優化工具

摘要：介紹一款模塊加載工具的入門，并且重點介紹其優化工具。發布目錄項目源代碼工具目錄，例如構建工具等。另外，前端代碼發布前都會進行壓縮，使文件足夠小。原來是因為里了，所以優化工具把也合并進來了。而優化工具要用好，要多嘗試他們的配置選項。前端變化太快，如今RequireJS已經無法吸引眼球了。介紹一款模塊加載工具：RequireJS的入門，并且重點介紹其優化工具。一、RequireJS簡介...

Loong_T 2019-08-19 17:59 評論0 收藏0
Javascript模塊化及webpack基本介紹

摘要：可維護性根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護。這標志模塊化編程正式誕生。的模塊系統，就是參照規范實現的。對象就代表模塊本身。 javascript模塊化及webpack基本介紹 JavaScript 模塊化發展歷程什么是模塊化 ? 為什么要做Javascript模塊化? JavaScript 模塊化發展歷程什么是模...

figofuture 2019-08-21 18:00 評論0 收藏0
Require.js實現js模塊化管理教程

摘要：再者，引入一大堆的文件也不美觀，而使用即可實現的模塊化異步加載。通過定義模塊的方式可分為以下兩類。當和這兩個模塊加載完成之后將會執行回調函數。插件可以使回調函數在結構加載完成之后再執行。最好的方式是使用字符串但這很難管理尤其實在多行的時候。什么是Require.js Require.js是一個AMD規范的輕量級js模塊化管理框架，最新版本require.js 2.1.11壓縮后只有1...

fox_soyoung 2019-08-20 12:21 評論0 收藏0
前端面試題（3）現代技術

摘要：什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面，后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時，將導航頁傳輸到客戶端，其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。什么是單頁面應用(SPA)？單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續請求都無需再離開此頁目標：旨在用為用戶提供了更接近本地...

EasonTyler 2019-08-26 11:58 評論0 收藏0