聊聊前端項目構建的現狀與想法

時間 2019-11-05

標籤聊聊前端項目構建現狀想法简体版

原文原文鏈接

蘇格團隊

做者：Luis

由來

通過近幾年的沉澱，前端屆的變革在現階段總算是進入了一個平穩期。回顧一下前人走過的路，主要是在解決如下問題：javascript

瀏覽器支持的語言特性不太友好，影響開發效率
項目缺少依賴管理，複製粘貼過低效且很差控制
須要工具來壓縮代碼、壓縮圖片、生成文件hash用於控制瀏覽器緩存等功能
開發時保存代碼能實時刷新瀏覽器提升開發體驗

爲了解決這些問題，出現瞭如下解決方案：css

babel，將ES六、typescript轉成瀏覽器支持的ES5代碼
DSL(domain specific language)，例如：less、sass等對於css的擴展，jsx、vue template、angular template對於html的擴展
npm 依賴管理工具
利用工具處理壓縮代碼、壓縮圖片、生成文件hash等功能
利用live reload、browsersync、hot reload工具實時刷新瀏覽器

這些解決方法成爲了咱們開發中不可或缺的功能，因而咱們須要一個工具把這些聯立起來，因而先後出現像grunt、gulp、fis、webpack等前端工程化構建工具。通過一段時間的更新迭代後，webpack以萬物皆模塊的思想以及功能強大，漸漸在衆多工具中脫穎而出，成爲前端項目中經常使用的構建工具。html

現狀

在現階段，我的以爲前端項目構建愈來愈重、愈來愈繁瑣了。對於一個新的項目，老是須要安裝一堆的依賴(幾百M的node_modules)，而後寫一堆構建工具的配置項，最後才能進行業務開發。當項目愈來愈大的時候，每次啓動時都須要花費很多時間。由於構建工具須要對項目進行依賴分析、編譯，最後才能輸出瀏覽器能執行的文件。這時構建工具配置的優化又提上你們的工做日程。前端

目前構建優化的方案，以webpack爲例，主要有如下幾個方向：vue

減輕依賴分析：webpack的resolve配置，loder的exclude配置
分包，動態加載：import()、require.ensure()
提取公用部分，減小須要編譯的依賴項：DllPlugin、externals
利用多線程、多進程進行並行編譯：thread-loader、happyPack
緩存：cache-loader、hard-source-webpack-plugin

可是業務代碼到達必定程度(5W行以上)，作了上述的優化後，速度確實加快了很多，可是我的感受對於dev(開發環境)仍然有些沉重。java

想法

在某次看到@vue/dev-server這個工具後，忽然間靈光一閃，想到了一個可行性的方案。這個工具只用一行命令就能夠快速的啓動一個.vue 單文件的開發環境，咱們先來看看它作了什麼處理。node

按照文檔創建的的文件，沒有webpack.config之類的配置，也沒有預處理輸出的文件。webpack

index.html 文件，利用目前最新chrome瀏覽器支持的es module加載main.js。git

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue dev</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import './main.js'
  </script>
</body>
</html>
複製代碼

main.js文件，引入test.vue文件，跟日常項目的入口文件同樣。test.vue文件內代碼就是日常vue單文件的格式，不展現了。github

import Vue from 'vue'
import App from './test.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
複製代碼

接着來看看瀏覽器加載的資源，路徑跟import保持一致，類型都是script(Content-Type: application/javascript)。

main.js中，import Vue from 'vue'被處理成import Vue from '/__modules/vue'。由於瀏覽器的es module還未實現仍在提案的import-maps特性，因此不支持不帶路徑的依賴。vue就是瀏覽器能執行的vue.js。

test.vue就是源文件進行編譯以後的代碼，由於本來的.vue單文件瀏覽器是不支持的，須要進行預編譯。

因而可知，該工具重點在於利用中間件，作了如下處理：

轉換不帶路徑的依賴(暫時只是vue，其它npm包未處理)的引用地址，讓瀏覽器支持
預編譯.vue文件，轉換成瀏覽器支持的js，相似於webpack中的vue-loader

仔細思考一下，目前的構建工具都是對項目所依賴的資源文件進行全量的處理，但不少時候，咱們只是對於某個頁面中的某個模塊進行開發。從理想的角度出發，其實咱們只須要對該頁面依賴的資源文件進行處理。每當加載瀏覽器不能執行的資源：vue、sass、less等，才進行轉譯/編譯處理，最後輸出資源文件到瀏覽器。

實際上社區也有人在作相似的嘗試，好比：systemjs，github描述是：Dynamic ES module loader。固然這不僅是爲了在瀏覽器端兼容es module，重點在於其實現的Transform loader功能。該功能提供相似於webpack loader的功能，對於匹配的依賴進行相對應的loader處理。具體loader處理能夠放到web worker或者經過node server進行處理，若是能兼容大部分webpack loader卻是一個不錯的方案。

目前該想法還有待驗證與實現，有興趣的可去了解一下相關的內容，如有進一步的研究，也但願能一塊兒交流討論。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。