react 技術棧項目輕量化方案調研

react 技術棧項目輕量化方案調研

團隊的新項目，不管是pc端的仍是移動端的，都已全面轉移到了 react 的技術棧。
然而，對移動端來講，react 框架腳本的體量仍是有些偏大。
在後續項目比較成熟，須要重點考慮性能的時候，如何優化其加載，是一個不得不考慮的問題。

尋找方案

優化加載，我首先想到的即是找尋替代的精簡後的框架腳本。正如 jquery 時代 zepto 所作的那樣。
通過一番查找，最終找到三個看上去可行的開源項目，preact react-lite rax。
接下來就是對他們一一嘗試，引入到現有項目，看是否可行了，而後對比選出一個合適的。

現有項目狀況

現有項目經過單獨加載 react 和 react-dom 兩個框架腳本，完成 react 的引入。

<!--react 15.4.2 -->
    <script src="/static/js/lib/react.js"></script>
    <script src="/static/js/lib/react-dom.js"></script>

另外，現有項目還引入了 react-router@2 來構建 spa。

加載大小以下圖：

preact

介紹

preact 項目的介紹是 「Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. 」
即 preact 項目的目的就是提供一個執行更快，體量更小的 react 官方庫的替代。

適配

參考項目文檔，經過一下代碼，完成適配。

<!-- preact 8.1.0 -->
    <script src="/static/js/lib/preact.min.js"></script>
    <script src="/static/js/lib/proptypes.js"></script>
    <script src="/static/js/lib/preact-compat.min.js"></script>
    <script>ReactDOM = React = preactCompat;</script>

效果

運行現有項目，功能均正常，替代有效。加載大小以下圖：

react-lite

介紹

react-lite 項目的介紹是 「an implementation of React that optimizes for small script size」
無論是從項目的命名仍是介紹均可以看出，項目的目的就是爲了精簡 react 的體量

適配

完成 react-lite 的適配很簡單，引入的腳本只有一個。

<!-- react-lite 0.15.33 -->
    <script src="/static/js/lib/react-lite.min.js"></script>
    <script>ReactDOM = React;</script>

效果

運行現有項目，功能均正常，替代有效。加載大小以下圖：

rax

介紹

rax 項目的介紹是 「A universal React-compatible render engine. 」
從描述看，其目的並非爲了解決 react 體量的問題的。只是其接口也是按兼容 react 的方式開發，同時體量也苗條。
若後續還有向其餘平臺遷移的打算，彷佛用它也不錯，因此我也決定試一試。

適配

<!-- rax 0.3.2 -->
    <script src="/static/js/lib/rax.min.js"></script>
    <script>React = ReactDOM = Object.assign({__esModule: undefined}, Rax);</script>

效果

由於 rax 沒有實現 createClass() 方法，致使沒法兼容 react-router@2 因此最終適配不成功。
但單純渲染 demo 中的用例沒有問題。不過和 react 仍是有很多差別，具體見 https://alibaba.github.io/rax/guide/compare-react。
所以如果要優化現有項目，仍是不用考慮。

結論

在只有 preact 和 react-lite 可行的狀況下。對比幾個關鍵因素：

	preact	react-lite
大小(react是7.5+37.2=44.7)	3.7+2.5+3.8=10(理論上合併後會再小一點)	10.7
github star	9140	1438

在綜合項目的活躍度，貢獻者等因素，我的以爲，preact 應該是最好的選擇。