技術期刊 · 吾令鳳鳥飛騰兮 | 使用 esbuild 加速 webpack;網易雲的熟人社交玩法;狀態管理利器 XState;TypeScript 是如何工作

語言: CN / TW / HK

HEADER

蒲公英 · JELLY技術期刊 Vol.44

生命不息,學習無止,這是很多人一以貫之的追求,雖然在很多領域中,知識是無法窮盡的,但每一點細小的改變都能讓自己可以更進一步,就好像離騷中所述,“吾令鳳鳥飛騰兮,繼之以日夜”,每一次振翅都能飛得更高些。

觀海志

登山則情滿於山,觀海則意溢於海

使用 esbuild 加速 webpack

梗概esbuild 是使用 go 編寫的打包工具,和 Webpack、Rollup 等常用打包工具對比,在速度方面擁有絕對優勢。esbuild-loader 可以用於在 Webpack 中使用 esbuild 去編譯 JS、TS;壓縮指令碼、樣式等,讓我們有機會同時擁有 Webpack 的生態和 esbuild 的編譯速度。具體有多快?看看社群怎麼說

推薦語:esbuild 推出已有一定時間,大家驚歎於它的速度的同時,可能受到歷史原因的影響,沒有辦法在工作中真正運用起來。利用 esbuild-loader,我們在 Webpack 專案中也可以體驗 esbuild 帶來的編譯速度優化。尤其在 dev 環境,我們對編譯結果和體積要求不高的情況下,使用 esbuil-loader 能大大提升編譯效率。

網易雲的熟人社交玩法

梗概:前段時間,網易雲音樂上線了一個基於熟人社交投票玩法的 h5 活動,該活動依據投票數權重值來劃分格子塊,並通過格子塊之間無縫擠壓動效極大地增加了趣味性。本文將著重介紹如何基於 treemap(矩形樹圖)來實現一個穩定的動態格子塊擠壓效果以及在這其中遇到的一些問題。

推薦語:該案例是演算法在前端業務中落地的典型場景,從需求分析,到演算法選型,再到效能優化,最後進一步追求「完美」的使用者體驗,都驗證了作者小結的一句話「它值得琢磨,有點東西,少年感永不過期」。

狀態管理利器 XState

梗概:XState 基於有限狀態機,是一個專業的狀態管理的庫。\ 對比傳統狀態管理,XState 解決了可能存在的一些問題,例如:混淆了狀態和資料、狀態轉移不夠嚴謹、缺乏概念化難以表述等。\ XState 對開發友好。它的狀態圖的視覺化工具,能讓人對狀態機的整體一目瞭然。此外,它也提供了優秀的生態支援,集成了 React、Vue、Svelte、不可變資料 Immer 等。

推薦語:在開發設計時,經常需要考慮如何維護邏輯狀態和業務流程等,複雜的狀態會導致維護成本劇增。\ 狀態機有著清晰的狀態和狀態轉移定義,輔以層級、併發、資料等拓展元素,可以非常有效地管理狀態。\ XState 圍繞狀態機相關的 SCXML 規範和 Statecharts 理念實現,其中的概念和設計也十分值得學習。

TypeScript 是如何工作的

梗概:TypeScript 是一門基於 JavaScript 拓展的語言,它是 JavaScript 的超集,並且給 JavaScript 添加了靜態型別檢查系統。本文就來探討簡單探討一下 TypeScript 是如何工作的,以及有哪些工具幫助它實現了這個目標。

推薦語:目前大多數專案都已經使用 TS 進行開發,稍微深入瞭解 TypeScript 的工作原理,及相關外掛工具,更有利於 TS 在專案開發中發揮最大作用

流觴亭

因山卜地心機巧,望水如天眼力窮

深入淺出 V8 引擎

梗概V8 引擎就是一個使用 C++ 編寫的高效能 JavaScriptWebAssembly 引擎,主要作用於 Chrome 瀏覽器 和 NodeJS ,能夠完成 編譯/執行 JS 程式碼,管理記憶體,負責垃圾回收,與宿主語言的交流等工作。

推薦語:每一個前端同學應該都對 V8 引擎不陌生,我們每天的工作都和 V8 引擎相關,如果我們可以更加熟悉內部的原理,那會給我們的日常工作帶來極大的助力。

「蒲公英」期刊,每週更新,我們專注於挖掘「基礎技術工程化跨端框架技術圖形程式設計服務端開發桌面開發人工智慧設計哲學前端框架」等多個大方向的業界熱點,並加以專業的解讀;不僅如此,我們還會推介精選凹凸技術文章,向大家呈現團隊內的研究技術方向。

抬頭仰望,蒲公英的種子會生根發芽,如夏花絢爛;格物致知,我們登高遠眺、滄海拾遺,以求積矽步而至千里。

蒲公英 · JELLY技術期刊貢獻指南

FOOTER