前端技術週刊 2018-06-22:Webpack 生存指南

前端技術週刊 2018-06-22

新聞

生態更新

  1. Nodejs 發佈了六月安全更新,建議開發者更新到 10.4.1 版本,包含對 HTTP/2 拒絕服務攻擊、TLS 拒絕服務等的預防。🔗
  2. 五月底,歐盟的通用數據保護協議 GDPR 進入強制執行階段,用戶數據採集方式的不合規將致使歐盟追責,此舉將影響各大全球化公司。對用戶隱私的保護成爲今年互聯網圈的一個主旋律:WWDC 2018 上,蘋果宣佈將採用智能反追蹤技術遏制前端指紋技術;此前 Firefox 也啓用了相似技術;Chrome,這個浪潮中相對保守的一家,則根據「更好的廣告」標準上線了過激廣告的過濾功能。與之相關的 Web 標準中的 doNotTrack 已被普遍支持,same-site cookie 則將在各大瀏覽器的新版本中獲得支持。🔗
  3. 5月,Nodejs 官方出了用戶調研報告,有不少數據值得一提:平均從業人員有 2.3 年的 Nodejs 使用經驗;94% 爲男性;近八成用戶使用了 NVM 之類的 Nodejs 版本管理;近六成使用了 LTS 版本的 Nodejs;3成的生產環境應用部署在 AWS 上;Nodejs 社區偏心的工具備:JSON 文件做爲持久化存儲、React 做爲前端框架、Express 做爲 Nodejs 框架、Nginx 做爲負載均衡工具、Docker 做爲容器、Jenkins 做爲 CI工具。🔗
  4. 若是你是 React 的忠實擁躉,那麼這多是社區的又一個好消息,Office 用 React 實現的版本接近完成了,這證實了 React 駕馭極複雜系統的能力。🔗
  5. 安卓上的 Chrome 68 起,添加到桌面的行爲有了細微調整,能夠偵測可以添加到主屏幕的事件 beforeinstallprompt,並容許開發調用 installPromptEvent.prompt() 徵詢用戶意見。🔗

瑞士軍刀

  1. Polly.JS 是 Netflix 用於捕獲、重放並記錄 HTTP 請求的一個 JS 庫。🔗
  2. 零配置的打包工具 Parcel 發佈其 1.9 版本,支持 Tree shaking 特性,Watcher 部分提速2倍。🔗
  3. ML5js 是基於 tensorflow.js 的一個封裝,提供了預訓練模型可直接用於檢測體態、短句生成、從新繪圖、自動譜曲、處理英文單詞關係等。🔗
  4. 友商 360 推出了 SpriteJS,提供了 canvas 上的相似 DOM 的渲染與動畫接口,亮點是支持了 Transition API 和 Web Animation API,並能夠簡單支持 D3 和 Protonjs。目前此庫還不支持 Web GL 渲染模式。🔗
  5. CSS Doodle 爲咱們提供了用 CSS Grid 繪製平面構成圖案的簡單方式。🔗

Screen Shot 2018-06-22 at 9.55.29 PM.png | center | 747x366

專題:Webpack生存指南

Webpack 恐怕是每個前端工程師的痛,過於複雜的配置反作用,徹底不可規避的打包流程,乏味、粗糙而難以讀懂的官網文檔,都讓你們對它又愛又恨。本期專題旨在讓你們可以成爲一個身心健康的 Webpack 配置工程師。
由淺入深進行webpack的項目實踐,同時也會介紹一些社區上的插件去解決一些問題。看完這一系列的教程,你有足夠的信心能夠將webpack應用到你的項目中了。
也是一篇很是不錯的入門級文章,另外還講解了create-react-app 的配置規則。文章質量很高,惟一的缺憾是做者僅針對 Webpack 3,而如今 Webpack 已經升級到了 4,create-react-app 也跟隨 Webpack 4 作了必定的升級。
Webpack 4 發佈時去除了 CommonsChunkPlugin,取而代之的是 SplitChunksPlugin。本文是webpack開發者在他們medium博客上的介紹文章。
金臺: 實際上你看完以後依而後一臉懵逼,仍是本身寫個demo多實踐一下吧。
金臺: 若是你實在看不懂官方文檔,試着運行一些他們本身的例子,本身體會一下,收穫也仍是不錯的。
若是你想本身實現一個 Webpack 的 Loader 或 Plugin,官方文檔惟一的建議是看代碼。那麼有沒有過來人看源碼的經驗呢?本文便是 Webpack 3 的源碼閱讀第一篇,系列一共 39 篇,值得一讀。
本文介紹了優化 Webpack 打包過程的各個策略,從測量、並行化、下降負載、緩存等角度給出了建議。
本文介紹了無刷新的通訊機制和通訊流程。
若是上面這些文章都救不了你,或許是時候去社區找找共鳴了。看看過來人是怎樣分析 Webpack 的難用點的吧:)

本期編輯:Humphrycss

相關文章
相關標籤/搜索