在這個課程中,我梳理了前端開發工作流程中和效率提升相關的知識點和案例,希望借此能幫你構筑一個系統性的前端效率知識體系,建立正確的問題解決思路,讓你進行效率優化時有據可依。

課程共 24 篇,分別從開發效率、構建效率和部署效率 3 個維度來展開講解。

  • 第一部分:開發效率。 開發是我們日常工作過程中最熟悉的部分。工欲善其事必先利其器,在這一模塊,我會主要分析各種項目在開發過程中的效率提升點,例如在項目啟動時如何選擇和配置自定義腳手架、如何配置我們的開發聯調環境等效率優化細節,還會介紹包括時下流行的云開發、無代碼工具、低代碼工具等提效新思路。希望你在學習之后,能夠在未來的項目開發中自如地選擇和搭建最適合自身的開發工具集。

  • 第二部分:構建效率。 如果說開發是我們日常投入最多的工作,那么等待構建結果就是日常耗費最多的非開發時間了。在這一模塊,我會分析那些影響到 webpack 構建時間的關鍵因素,并詳細分析對應的解決方案和工具。此外,我還會進一步講解 webpack 5 中新的效率提升方案,并帶你了解 no-bundle 類構建工具的優缺點。希望通過這些內容的學習,來幫助你建立完整的構建工具優化思路,進一步優化你的項目構建效率 , 最大程度消滅那些無謂的等待時間。

  • 第三部分:部署效率。 代碼從構建到部署是前端能力的延伸。許多企業日常工作中的代碼部署使用的是前后端通用的 CI/CD 系統,而前端開發人員在使用過程中較少能對其中的流程效率進行優化。在這一模塊,我將介紹那些業界常用的 CI/CD 系統 ,并分析其中前端項目的效率優化點,以及從打包機方案到容器化方案、前端項目在部署時的注意點和優化空間。 希望學習完這部分內容,你能結合所在企業的技術特點,來打造或優化適合你前端項目的部署流程。

你將獲得
全面、系統的效率工程化知識體系。我會帶你系統學習相關知識,而不是碎片化獲取,讓你補全短板,提升個人技術實力。

對實際項目輸出針對性優化方案的能力。正確的方法比努力更重要,有了正確的思路方法,才能在實際工作中快速定位癥結、避免跑偏,避免把力氣花在一些細枝末節上。

豐富的實戰經驗分享。我將從常用的開發效率提升工具講到 webpack 底層的技術細節,再到部署工具中的效率優化分析,高度還原真實的業務場景,帶你了解前端效率工程優化的全過程。

面試 Offer 收割利器。課程中的許多案例,都是前端工程化方向面試題的重災區,我將指出容易被忽略的內容考點,讓你既能在整體上對效率工程化有一個由點到面的認識,也能深入掌握關鍵的技術細節。

最后,前端效率工程化涉及前端日常工作的各個環節,90% 的復雜度都藏匿在冰山之下,也因此很多人在解決效率問題時 “只見樹木,不見森林”,希望這個專欄可以幫你建立上帝視角,讓你體會到“哦,原來效率優化還有這些方面!”的感覺。

單點問題的解決往往只關注當下,但系統化的解決方案,有助于增長你的長期價值。希望這個課程能夠讓你有新的啟發,也希望你在留言區和我說說你的成長與困惑,與眾人一起前行。