jsliang 求職系列 - 36 - 前端工程化系列總結

時間 2020-12-08

標籤 javascript html 前端 vue java node react webpack git es6 欄目 JavaScript 简体版

原文原文鏈接

一目錄

不折騰的前端，和鹹魚有什麼區別javascript

目錄
一目錄
二複習知識點
2.1 Babel
2.2 Webpack
2.3 Webpack - Tree Shaking
2.4 Webpack - Scope Hoisting
2.5 Webpack 簡單實現
2.6 Webpack 性能優化
三參考文獻
3.1 雜
3.2 Babel
3.3 模板引擎
3.4 前端監控
四 Webpack 參考文獻
4.1 Webpack 系列文章
4.2 Webpack 性能優化
4.3 Scope Hoisting
4.4 Tree Shaking
4.5 懶加載

二複習知識點

本系列參考 79 篇文章，總結出 6 篇文章，感謝小夥伴們的支持。html

2.1 Babel

文章地址：Babel前端

[x] AST：抽象語法樹，是源代碼語法結構的一種抽象表示
[x] 原理：將現有的 ES6+ 代碼，先經過 詞法分析 和 語法分析 以後解析爲 AST，而後將這份 AST 轉換爲咱們須要形式的 AST，最後將這個 AST 再轉換成 ES5 或者指望格式的內容。

2.2 Webpack

文章地址：Webpackvue

[x] 是什麼：本質是一個模塊打包器，其工做是將每一個模塊打包成相應的 bundle
[x] 核心概念：mode、entry、output、loader、plugin
[x] 構建流程：初始化、編譯、輸出，插件（Plugin）隨時監聽 Webpack 廣播並在某些時候調用 API 改變運行結果。
[x] entry：指定打包⼊口⽂文件。本來是 string，即一個入口對一個打包文件、object 多對一，array 多對多
[x] output：打包後的文件位置
[x] loader：翻譯官，對不一樣資源進行處理，從右向左執行
[x] plugin：插件，擴展 Webpack 的功能，監聽 Webpack 的生命週期，調用 API 改變輸出結果。
[x] resolve：配置 Webpack 如何尋找模塊所對應的文件。resolve.modules/extensions/include/exclude
[x] 從 0 開始配置 Webpackjava
- [x] 技術選型：移動端|PC、MPA|SPA、HTML|模板引擎、CSS|預處理器、ES5|ES6+、Mock、React|Vue、多人合做|單人項目、ESlint|TSlint、單元測試、提交規範
- [x] Loader 處理 CSS、Less、Sass
- [x] Loader 處理圖片
- [x] Loader 處理字體
- [x] Loader 配置多頁面打包（MPA）
- [x] source map
- [x] webpack dev server
- [x] babel
- [x] react
- [x] 性能優化
- [x] 其餘：解析器、寫 Loader、寫 Plugin
[x] 懶加載node
- [x] 代碼分割：code splitting
- [x] 實現原理：子模塊單獨打包、藉助函數延遲加載
- [x] Vue 按需加載
[x] 熱更新react
- [x] 開啓方式：配置 devServer，添加熱更新插件 HotModuleReplacementPlugin
- [x] 熱更新原理
[x] 3 種 hash：webpack
- [x] hash：整個項目只要有文件更改，那就變動
- [x] chunkhash：某個入口對應的 chunk 進行了變動，那就生成新的 hash 值，不會影響其餘 chunk
- [x] contenthash：對應某個文件內容變動了，纔會更換這個文件，生成新的 hash，而不會影響同一個模塊下其餘文件
[x] source map：將編譯、打包、壓縮後的代碼映射回源代碼的過程

2.3 Webpack - Tree Shaking

文章地址：Webpack - Tree Shakinggit

[x] Tree Shaking：經過在 package.json 中開啓 sideEffects，將 ES6 模板語法的 import 行爲導入的文件都標記爲無反作用，而後開啓 -p 的生產模式，讓 Webpack 調用內部的 UglifyJSWebpackPlugin 來進行刪除未引用代碼。
[x] dead-code：代碼不會被執行，或者執行結果不會被用到，或者代碼只會影響死變量的，叫作 dead-code
[x] 反作用：若是在 import 導入時就會作一些特殊行爲的代碼，稱之爲有反作用的代碼，例如 polyfill 會影響全局做用域
[x] 靜態分析：ES6 模板語法能夠在不執行代碼的狀況下，從字面量上對代碼進行分析。靜態分析是 Tree Shaking 的基礎。而 require 是須要執行了才知道引用內容的，就不能經過靜態分析作優化

2.4 Webpack - Scope Hoisting

文章地址：Webpack - Scope Hoistinges6

[x] Scope Hoisting：Webpack3 添加的功能，做用域提高。原理是分析模塊的引用關係，將打散的模塊合併到同一個函數中，須要 ES6 模板語法進行靜態分析

2.5 Webpack 簡單實現

文章地址：Webpack 簡單實現

[x] 利用 babel 完成代碼轉換，並生成單個文件的依賴
[x] 生成依賴圖譜
[x] 生成最後打包代碼

2.6 Webpack 性能優化

文章地址：Webpack 性能優化

[x] resolve.modules：用於配置 Webpack 去哪些目錄下尋找第三方模塊（node_modules）
[x] resolve.extensions：在導入沒帶文件後綴的路徑時，Webpack 會自動帶上後綴去嘗試詢問文件是否存在，而 resolve.extensions 用於配置嘗試後綴列表；默認爲 extensions:['js', 'json']
[x] resolve.include/exclude：以 babel-loader 爲例，能夠經過 include 和 exclude 幫助咱們避免 node_modules 這類龐大文件夾]
[x] 緩存：cache-loader 和 uglifyjs-webpack-plugin，將編譯結果寫進硬盤緩存，下次文件若是沒有變化則直接拉取緩存
[x] 多進程：Happypack 和 thread-loader，將任務分解成多個子進程去併發執行，提升打包效率
[x] 多進程壓縮：Webpack 自帶的 UglifyJSWebpackPlugin 壓縮插件是單線程運行的，而 TerserWebpackPlugin 能夠並行執行（多線程）
[x] 靜態資源分離：CommonsChunkPlugins 每次構建都會從新構建 vendor，出於效率問題使用 DllPlugin 能夠將第三方庫單獨打包到一個文件中，只有依賴自身發生版本變化纔會從新打包
[x] 打包資源壓縮：
- [x] JS 壓縮：UglifyJSWebpackPlugin 和 TerserWebpackPlugin
- [x] HTML 壓縮：HtmlWebpackPlugin
- [x] CSS 壓縮：MiniCssExtractPlugin
- [x] 圖片壓縮：ImageWebpackPlugin
- [x] Gzip 壓縮：不包括圖片
[x] Tree Shaking
[x] Scope Hoisiting
[x] 按需加載

三參考文獻

本系列參考文獻有 79 篇.

3.1 雜

2020：

[x] 大公司裏怎樣開發和部署前端代碼？【閱讀建議：10min】
[x] 前端高級進階：前端部署的發展歷程【閱讀建議：20min】

2019：

[x] 前端同構渲染的思考與實踐【閱讀建議：20min】

2018：

[x] 前端工程師爲何要學習編譯原理？【閱讀建議：30min】
[x] 50行代碼的MVVM，感覺閉包的藝術【閱讀建議：10min】
[x] 很差意思！耽誤你的十分鐘，讓MVVM原理還給你【閱讀建議：20min】
[x] 2018 前端性能優化清單【閱讀建議：30min】
[x] 網頁圖片加載優化方案【閱讀建議：20min】
[x] 如何優雅處理前端異常【閱讀建議：30min】

3.2 Babel

[x] 一篇文章瞭解前端開發必須懂的 Babel【閱讀建議：10min】
[x] 不容錯過的 Babel7 知識【閱讀建議：30min】
[x] 前端工程師須要瞭解的 Babel 知識【閱讀建議：30min】
[x] 深刻淺出 Babel 上篇：架構和原理 + 實戰【閱讀建議：30min】
[x] 深刻淺出 Babel 下篇：既生 Plugin 何生 Macros【閱讀建議：30min】
[x] 前端工程師的自我修養-關於 Babel 那些事兒【閱讀建議：20min】
[x] 前端與編譯原理——用JS寫一個JS解釋器【閱讀建議：20min】
[x] 面試官: 你瞭解過Babel嗎？寫過Babel插件嗎? 答: 沒有。卒【閱讀建議：10min】
[x] 入門babel--實現一個es6的class轉換器【閱讀建議：10min】

3.3 模板引擎

[x] 編寫一個簡單的JavaScript模板引擎【閱讀建議：5min】
[x] JavaScript模板引擎原理，幾行代碼的事兒閱讀建議：10min】
[x] Vue 模板編譯原理【閱讀建議：30min】

3.4 前端監控

[x] 5 分鐘擼一個前端性能監控工具【閱讀建議：10min】
[x] 把前端監控作到極致【閱讀建議：10min】
[x] GMTC 大前端時代前端監控的最佳實踐【閱讀建議：20min】
[x] 前端監控和前端埋點方案設計【閱讀建議：20min】
[x] 騰訊CDC團隊：前端異常監控解決方案【閱讀建議：20min】
[x] 把前端監控作到極致【閱讀建議：10min】

四 Webpack 參考文獻

Webpack 系列參考文獻有 52 篇文章。

4.1 Webpack 系列文章

其餘：

[x] Webpack 中文文檔【閱讀建議：無】
[x] Webpack小書【閱讀建議：無】

2020 年文章：

[x] 「吐血整理」再來一打Webpack面試題【閱讀建議：1h】
[x] 帶你深度解鎖Webpack系列(基礎篇)【閱讀建議：1h】
[x] 帶你深度解鎖Webpack系列(進階篇)【閱讀建議：30min】
[x] 帶你深度解鎖Webpack系列(優化篇)【閱讀建議：20min】
[x] webpack loader 從上手到理解系列：vue-loader【閱讀建議：20min】
[x] webpack loader 從上手到理解系列：style-loader【閱讀建議：20min】
[x] 霖呆呆的webpack之路-loader篇【閱讀建議：20min】
[x] 揭祕webpack plugin【閱讀建議：30min】

2019 年文章：

[x] 關於webpack4的14個知識點,童叟無欺【閱讀建議：30min】
[x] 實現一個簡單的webpack【閱讀建議：1h】
[x] 一文掌握Webpack編譯流程【閱讀建議：1h】
[x] 前端工程師都得掌握的 webpack Loader【閱讀建議：30min】
[x] 輕鬆理解webpack熱更新原理【閱讀建議：1h】
[x] webpack 中那些最易混淆的 5 個知識點【閱讀建議：30min】
[x] 前端構建祕籍【閱讀建議：30min】

2018 年文章：

[x] 手把手教你擼一個 Webpack Loader【閱讀建議：1h】
[x] 手把手教你擼一個簡易的 webpack【閱讀建議：30min】
[x] Webpack揭祕——走向高階前端的必經之路【閱讀建議：30min】
[x] webpack詳解【閱讀建議：1h】
[x] webpack4-用之初體驗，一塊兒敲它十一遍【閱讀建議：30min】
[x] 帶你走進webpack世界，成爲webpack頭號玩家。【閱讀建議：20min】
[x] 【webpack進階】你真的掌握了loader麼？- loader十問【閱讀建議：20min】
[x] webpack打包以後的文件過大的解決方法【閱讀建議：10min】
[x] 基於Webpack搭建React開發環境【閱讀建議：10min】

2017 文章：

[x] Webpack 源碼（一）—— Tapable 和事件流【閱讀建議：10min】

4.2 Webpack 性能優化

2019 年文章：

[x] Webpack優化——將你的構建效率提速翻倍【閱讀建議：10min】
[x] 性能優化篇---Webpack構建速度優化【閱讀建議：10min】
[x] 使用webpack4提高180%編譯速度【閱讀建議：10min】
[x] 多進程並行壓縮代碼【閱讀建議：5min】
[x] webpack 4: Code Splitting和chunks切分優化【閱讀建議：5min】

2018 年文章：

[x] Tree-Shaking性能優化實踐 - 原理篇【閱讀建議：10min】
[x] 體積減小80%！釋放webpack tree-shaking的真正潛力【閱讀建議：10min】
[x] 你的Tree-Shaking並沒什麼卵用【閱讀建議：5min】
[x] webpack 如何經過做用域分析消除無用代碼【閱讀建議：5min】
[x] 讓你的Webpack起飛—考拉會員後臺Webpack優化實戰【閱讀建議：5min】
[x] webpack dllPlugin打包體積和速度優化【閱讀建議：5min】
[x] webpack優化之code splitting【閱讀建議：5min】

2017 年文章：

[x] Webpack 打包優化之速度篇【閱讀建議：5min】
[x] 加速Webpack-縮小文件搜索範圍【閱讀建議：5min】
[x] Webpack 大法之 Code Splitting【閱讀建議：5min】

4.3 Scope Hoisting

[x] webpack 的 scope hoisting 是什麼？【閱讀建議：5min】
[x] 經過Scope Hoisting優化Webpack輸出【閱讀建議：5min】
[x] 【Webpack】654- 了不得的 Webpack Scope Hoisting 學習指南【閱讀建議：5min】

4.4 Tree Shaking

[x] Tree Shaking - Webpack 5.0.0-rc.0【閱讀建議：僅供參考】
[x] Webpack 4 Tree Shaking 終極優化指南【閱讀建議：30min】
[x] Tree-Shaking性能優化實踐 - 原理篇 - 2018【閱讀建議：僅供參考】
[x] Webpack4: Tree-shaking 深度解析 - 2019【閱讀建議：僅供參考】

4.5 懶加載

[x] Vue Webpack 打包優化——路由懶加載（按需加載）原理講解及使用方法說明【閱讀建議：20min】
[x] 懶加載 - Webpack v5.0.0-rc.0【閱讀建議：5min】
[x] webpack的代碼分割（路由懶加載同理）【閱讀建議：10min】