react 技術(shù)棧項目輕量化方案調(diào)研

團隊的新項目，無論是pc端的還是移動端的，都已全面轉(zhuǎn)移到了 react 的技術(shù)棧。
然而，對移動端來說，react 框架腳本的體量還是有些偏大。
在后續(xù)項目比較成熟，需要重點考慮性能的時候，如何優(yōu)化其加載，是一個不得不考慮的問題。

尋找方案

優(yōu)化加載，我首先想到的便是找尋替代的精簡后的框架腳本。正如 jquery 時代 zepto 所做的那樣。
經(jīng)過一番查找，最終找到三個看上去可行的開源項目，preact react-lite rax。
接下來就是對他們一一嘗試，引入到現(xiàn)有項目，看是否可行了，然后對比選出一個合適的。

現(xiàn)有項目情況

現(xiàn)有項目通過單獨加載 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>

另外，現(xiàn)有項目還引入了 react-router@2 來構(gòu)建 spa。

加載大小如下圖：

preact

介紹

preact 項目的介紹是 “Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. ”
即 preact 項目的目的就是提供一個執(zhí)行更快，體量更小的 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>

效果

運行現(xiàn)有項目，功能均正常，替代有效。加載大小如下圖：

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>

效果

運行現(xiàn)有項目，功能均正常，替代有效。加載大小如下圖：

rax

介紹

rax 項目的介紹是 “A universal React-compatible render engine. ”
從描述看，其目的并不是為了解決 react 體量的問題的。只是其接口也是按兼容 react 的方式開發(fā)，同時體量也苗條。
若后續(xù)還有向其他平臺遷移的打算，似乎用它也不錯，所以我也決定試一試。

適配

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

效果

因為 rax 沒有實現(xiàn) createClass() 方法，導致無法兼容 react-router@2 所以最終適配不成功。
但單純渲染 demo 中的用例沒有問題。不過和 react 還是有不少差異，具體見 https://alibaba.github.io/rax/guide/compare-react。
因此若是要優(yōu)化現(xiàn)有項目，還是不用考慮。

結(jié)論

在只有 preact 和 react-lite 可行的情況下。對比幾個關(guān)鍵因素：

preactreact-lite

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

在綜合項目的活躍度，貢獻者等因素，個人覺得，preact 應該是最好的選擇。

轉(zhuǎn)載于:https://www.cnblogs.com/snadn/p/6826207.html

總結(jié)

以上是生活随笔為你收集整理的react 技术栈项目轻量化方案调研的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。