微醫前端帶你從頭創建構建體系【開篇】

楊毅臻，微醫前端技術部平臺支撐組，全宇宙最 Open 的前端團隊~css

此文做爲這個系列的目錄，會一直更新。前端

標題	模塊	內容
你怎麼能夠不瞭解 AST 呢？	公共	原理分析
90 行代碼的webpack，你肯定不學嗎？	webpack	簡易實現
萬字長文：關於sourcemap，這篇文章就夠了	webpack	原理分析
【Webpack】devServer 實驗報告	webpack	原理分析
120 行代碼幫你瞭解 Webpack 下的 HMR 機制	webpack	原理分析
寶啊～談談Tapable	webpack	原理分析
Webpack - 手把手教你寫一個 loader / plugin	webpack	簡易實現
Webpack 實現 Tree shaking 的前世此生	webpack	原理分析
Webpack」從0到1學會 code splitting	webpack	原理分析
webpack 最佳實踐	webpack	簡易實現
Module Federation你的浪漫我來懂	webpack	原理分析
十分鐘瞭解vite如何支持react	vite	原理分析
站在潮流前沿，快速實現一個簡易版 vite	vite	簡易實現
10 分鐘搞懂 Vite devServer，速來圍觀！	vite	原理分析
【vite】你不知道的小妙招，肯定不看一下嗎？	vite	原理分析
Vue 2 系統如何快速遷移 Vite 做爲開發工具	vite	簡易實現
無用代碼去哪了？項目減重之 rollup 的 Tree-shaking	rollup	原理分析
rollup - 構建原理及簡易實現	rollup	簡易實現

關於微醫

微醫是國際領先的智能化數字健康平臺，總部位於杭州。微醫以「健康有道，就醫不難」爲使命，十年來始終致力於經過創新和科技推進中國醫療健康產業數字化、智能化，爲全社會提供優質、高效、可及的醫療健康服務，守護億萬人健康。vue

微醫前端技術部目前 90+個前端小夥伴，負責微醫集團全端、全棧、全場景的產品研發工做，主要技術棧 Vue（SSR）、React（RN）、Node（BFF），崇尚工程師文化，探索技術極限，致力於用代碼讓全民醫療健康做出美好改變！node

專欄系列計劃

爲何要作專欄系列

多人頭腦風暴，研究完總體系並輸出，提高技術氛圍
總結內部的最佳實踐，提高公司總體水平，反哺架構

結束時間

計劃在 6 月底（第二季度）以前結束

爲何選擇構建體系

面試屬於薄弱點

貼幾個面試題react

聊一聊 webpack 的優化手段，說說你熟悉優化手段的原理
tree-shaking 的原理，哪些狀況屬於反作用，在 rollup 和 webpack 的不一樣表現
webpack 的打包原理及產物是如何執行的，動態加載呢，如何緩存的，與 rollup 的區別

拋開咱們的平常開發，這塊的細節平時使用頻率較低，所以若是不通過系統學習很是容易觸及知識盲區~jquery

整個體系比較大

相信很多人以前就有嘗試學習過 webpack，但老是學了就忘（官網文檔確實挺多的），要系統掌握費時費力還不容易記住。webpack

同時做者寫這個系列容易爛尾，由於要花很大時間研究和學習；但它特別適合咱們集體進行研究、輸出。web

基建基礎

包含了面試

優化項目
工程能力
編譯原理
架構方案

不管是流程仍是提效，這都是團隊繞不開的技術能力儲備。vue-cli

專欄內容

ps.多人協做、按模塊分工，因業務增加致使排期不一致，因此文章可能不會按照順序產出，可是每一篇都是獨立的且不影響閱讀體驗，也能夠先收藏等養肥了再從頭開始看。

整個專欄會以webpack五、vite、rollup爲核心展開，從框架基本原理分析到本身實現最後是一些我司的最佳實踐及架構級別的探索。

構建基礎：針對當下比較熱門的工具進行介紹
逐漸深刻：分別進行原理解析及簡單實現
創建體系：共同點分析及差別化對比提煉整個構建體系
實戰內化：公司的最佳實踐及實戰探索

你能從中收穫什麼

針對不一樣階段的同窗都可以收穫

構建認知：清楚理解什麼是構建，爲何要構建以及不一樣構建工具的區別
面試知識：最新鮮原理分析，整個構建流程經歷了哪些步驟分別作了什麼
最快入門：快速搭建、優化構建的解決方案，配置案例拿走就用
基建儲備：提供一些踩坑案例，公司內部的探索，說不定對你有啓發，歡迎探討

構建演進史

石器時代

這裏列舉的是 node 尚未普及起來, 當時前端的做用大都是動效切圖仔。

稍微複雜一點的場景，會將咱們的業務代碼(js、css)使用代碼壓縮工具(這個網上就有在線版)進行手動壓縮、混淆相似於 jquery.min.js 這樣的版本, 最後會放到 CDN，這個時候只有手動整合打包產物。

咱們經過當即調用的函數表達式(IIFE)來實現最初的模塊化概念，避免污染全局執行環境去使用一些第三方模塊方式，可是他們之間的依賴順序和衝突依舊存在。

此時有了代碼脫敏和減小體積的概念，然而咱們仍是有大量人工整理工做，所以咱們須要易用性；有了模塊化的概念卻依舊須要更細粒度的解耦。

青銅時代

AMD & CMD —— 題外，屬於模塊化

瀏覽器無法使用 commonjs，使得代替他的倆種模塊化規範 —— require.js（AMD）和 Sea.js（CMD）大放異彩。使用這倆個方案能夠幫助咱們有效的拆分代碼，組織代碼，在原來粗暴的模塊化方式上又進了一步，誕生了依賴與結構的概念。

這是影響 bundle 格局很是重要的痛點。

農業時代

node 的普及與成熟，讓構建更近了一步。

此時先後端分離的概念已經逐漸清晰起來，前端開始脫離服務端代碼或是 framemaker，本身進行項目維護和 package。

nodejs 的誕生伴隨着 npm 和 commonjs 的到來，上個時代的"模塊化"被自然的支持起來，有了模塊化的概念各類第三方庫便如雨後春筍般冒尖了。

ES6

import/export 則是 ES6 提出的 Esm 模塊化規範，隨着 ES6 的覆蓋，AMD 和 CMD 的戰役終於結束了，同時也加速了 bundle 的額外功能，編譯（babel）。

在線編譯時間太長了，影響體驗，可否把編譯時間存留在打包前置階段呢？

打包工具的誕生

webpack、grunt、glup 等，誕生核心都是模塊打包器，經過一系列可操做的配置對文件進行預編譯與整合。

這些打包工具在配置上各有千秋，grunt 自動化執行任務、webpack 偏按照能力進行配置、glup 偏工做流式鏈式調用。

使用姿式各有千秋，配套生態跟不上纔是關鍵因素。

webapck 以強大的 code splitting 和配置化的低門檻佔領高地。

此時 bundle 只負責輸出最終產物，隨着業務的複雜度，不能每次本身打包部署在不一樣環境吧？多場景多環境須要更多能力知足咱們的開發效率。

工業時代 —— 當下

簡單說就是工程化，同時對於體驗、兼容性、性能、多環境等更高層次的追求須要打包工具去逐步升級。

結合 npm 的生態圈，這些都不成問題，因此當時也有人笑稱配置工程師。

webpack 從一個模塊打包器開始蛻變，由於其開放性設計，被許多工具做爲底層進行二次封裝。

vue-cli、create-react-app、umi

vue、react 的興起與之配套的自動化工具逐漸進入視野，更加的易用，把更多的配置默認收斂到工具內部，減小心智負擔。

覆蓋從源碼到構建產物的每一個生命週期，支持各類功能擴展和業務需求(截至 umi)。

rollup

站擼 ES6，hooks 式的配置更輕，TreeShaking 的效果更好，我司當前開發 sdk 和工具庫都是使用它快速出活。

將來 —— bundless

vite、snowpack

終端將前端拉近用戶，它的進步決定前端的進步，瀏覽器端已經支持了 ESM （script 的 type 屬性設置爲 module）, 咱們能夠更愉快的直出了（區別於中出）。直出意味着什麼？最大程度的作到了按需加載，以及取消編譯 ES6！

然而由於兼容性的問題，咱們仍是不能在產線直接使用 ESM（看具體業務場景），最終仍是須要打包（vite在生產環境也是這麼作的使用了rollup），相信在將來這個問題會獲得改善（http二、終端的迭代進步）。

咱們的部分項目也已經開始使用 vite，絲滑的啓動和熱更新速度讓人拍案叫絕。

module federation

webpack5 出了殺招，以模塊共享爲切入點從新弱化了編譯問題，提早編譯並使用相似於 DLL 的方式在項目中引入並執行。與其說是提高了打包速度倒不如說是採用了"雲"代碼的概念，屬於跨應用的抽離，在業務複用、微前端等場景留有很大的想象空間。

總結

總結一下貫穿前端發展飛速的這 10 年，演進的核心因素:

更快

打包方式
直出加載

更小

拆分粒度
優化方案

更易用

生態豐富
配置集成

結語

爲何開篇介紹了構建的歷史演進，就是但願你們可以看到隨着整個前端技術的發展，咱們所遇到的問題以及各個優秀的解決方案對咱們技術起到翻天覆地的影響。

拋一個小問題，你如今在使用的構建工具是什麼，遇到過什麼問題，歡迎在評論區討論

立馬收藏咱們看整個系列專欄吧 ~

看完別忘記對我素質四連，點贊、關注、轉發、評論