前端 | 使用 require.js 和 webpack 簡單對比

引子

項目前端腳本依賴使用了 require.js 作打包依賴，如今技術更新迭代之快，讓人目不暇接，從 James Burke 在 2009 年 9 月 28 號 第一次提交開始，require.js 如今已經走過了將近 6 年的時間，固然，如今 require.js 還在不斷的向前奔跑。

有朋友說 require.js 已通過時了，我保持沉默，判斷一個事物的過期，我的以爲應該看看它有沒有順應技術潮流，我不知道 require.js 的將來是怎麼樣的，可是如今看到做者的不斷更新，仍是蠻開心的。

接着列一下都熟悉的新一代的工具：國內的 FIS, 國外的 webpack, systemjs 等等，這裏面的工具都玩過，但仍是着重聊下 webpack, 至於緣由，是在項目的當前的結構下，require.js 和 webpack 能夠無縫切換，webpack 第一次提交是在 2012 年 8 月，我是去年年初接觸到的，批評下本身的嗅覺仍是不夠靈敏。

選擇

以前寫文章透露了前端架構選用了 require.js, 當時爲何沒有選擇 webpack, 緣由：

• 相比較而言 require.js 更爲熟悉
• 腳本加載緩存

這裏詳細說下第二個緣由

使用 require.js

用 require.js, 我能夠把全站全部的腳本打包成兩到三個文件，全局加載，文件結構以下：

基本頁面：全局加載

xxxxx
<script src="require.min.version.js"></script>
<script src="desk.min.version.js"></script>
xxxxx

子頁面：不一樣路由指向的頁面

xxxx
<script>
    require('moduleA', function(moduleA) {
        new moduleA();
    });
</script>
xxxx

這裏什麼意思呢，也就是說全局加載了全部的模塊，不一樣的頁面直接調用相應的模塊便可，顯而易見的好處是不用打包時不用分發不少的腳本，但仍是有些不爽的是：每一個頁面要單獨寫不一樣的加載邏輯

使用 webpack

不能否認，webpack 提出的概念值得學習和探討，坊間不是有傳言 Instagram 把 webpack 的做者 Tobias Koppers 撈了過去嘛。

用 webpack 打包，結構和 require.js 是不一樣的，我把公用的模塊打包成一個文件，其餘對應的功能模塊自動分發

子頁面 1

<script src="global.min.version.js"></script>
<script src="app1.min.version.js"></script>

子頁面 2

<script src="global.min.version.js"></script>
<script src="app2.min.version.js"></script>

這裏沒有 require.js 的加載邏輯，由於子模塊對應的文件加載後會自動運行。缺點：會產生多一些的腳本。

至於二者的比較，我的以爲應該結合場景，具體問題，具體分析。每一個工具的側重點不一樣。

這裏擇其中一功能點，亂談一番