編譯的速度與激情：從 10mins 到 1s

導語：對于大型前端項目而言，構建的穩定性和易用性至關重要，騰訊文檔在迭代過程中，復雜的項目結構和編譯帶來的問題日益增多，極大的增加了新人上手與日常搬磚的開銷。恰逢 Webpack5 上線，不如來一次徹底的魔改～

在 《XSS 終結者-CSP 理論與實踐》 中，講述了 CSP 基礎語法組成與使用方式。通過一步步的方案制定，最終我們利用 CSP 提供的域名白名單機制，有效地將異常的外聯腳本攔在門外。然而在線上環境千千萬萬，雖然我們限制了外聯腳本，但卻仍被內聯腳本鉆了空子。

前言

前段時間看了下開源組件 stryker 的源碼，對 Typescript 的解析器產生了興趣。這個開源組件是用來檢查單測質量的，通過識別源碼自動更改某些代碼內容，然后看單測能否檢測出來。Typescript 解析器做的，就是識別源碼這一關鍵步驟。

于是花了些時間學了下 Typescript 解析器，感覺像打開一個新的大門，可以玩很多有趣的事情。

附：stryke (https://github.com/stryker-mutator/stryker/tree/master)

最基礎，生成 AST

翻了下 Stryker 的源碼，發現應用 Typescript 解析器的關鍵語句如下：

Web Worker 介紹

眾所周知，JavaScript 這門語言的一大特點就是單線程，即同一時間只能同步處理一件事情，這也是這門語言衍生出的 nodeJS 被各后端大佬詬病的很重要的一點。

腳本錯誤量極致優化-定位壓縮且無 SourceMap 文件的腳本錯誤

”JS 代碼壓縮后，定位具體出錯代碼困難！“ 的問題，我們可以通過 SourceMap 快速定位，處理得到源文件的具體錯誤信息。具體方式可以查看 《腳本錯誤量極致優化-讓腳本錯誤一目了然》

然而當項目外鏈第三方資源或公共庫時，這種壓縮且無提供 SourceMap 的文件出現異常，又該如何更好的定位錯誤位置呢？

背景

需求預溝通

• 產品：我們需要做一個 IM，和微信一樣
• 我：打擾了，走錯片場了，你們繼續，，，，，，，
• ....
• 我：這個需求雖然不合理，但是我還是接了。。。。。。

TypeScript 中高級應用與最佳實踐

當我們討論 TypeScript 時，我們在討論什么？

閉包這個概念是前端工程師必須要深刻理解的，但是網上確實有一些文章會讓初學者覺得晦澀難懂，而且閉包的文章描述不一。

本文面向初級的程序員，聊一聊我對閉包的理解。當然如果你看到閉包聯想不到作用域鏈與垃圾回收也不妨看一眼。希望讀了它之后你不再對閉包蒙圈。

基于 React 的組件化開發方式，為富前端 web 應用提供大量技術實踐，社區逐漸形成了穩定的組件規范，本文從 API 層面歸納出 6 種組件類型，分析其優缺點和適用場景，為日常組件開發提供一個方法指南。6 種類型分別為結構型組件、樣式型組件、組合型組件、配置型組件、受控型組件、非受控組件。

寫在前面

Omi 框架 正式發布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作為 Omi 組件化開發特效運動解決方案，讓你輕松在 Omi 項目里快速簡便支持 CSS3 Transform 設置。css3transform 是經受過海量項目洗禮的，作為移動 Web 特效解決方案，在微信、手 Q 興趣部落、日跡、QQ 群、QQ 附近等項目中廣泛使用，以激進的修改 DOM 屬性為代價，帶來極為便利的可編程性。

你可以通過 css3transform 官方首頁快速了解它。