[譯] 正在消失的小型網站

• 原文地址：Small Websites Are Dying
• 原文做者：Seva Zaikov
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：EmilyQiRabbit
• 校對者：wznonstop，xionglong58

網站正在日益增大，JavaScript 也在飛速發展、升級，爲了能跟上時代，你須要將你的代碼從最新的版本轉譯成瀏覽器兼容的模式（儘管這很是複雜，但相信 babel 能搞定）。此外，你也可使用其餘語言編寫網頁，好比 typescript。而在 typescript 以前，已經有過不少相關嘗試(1，2，3 等等)，但一個重要的事實是，typescript 被建議要普遍應用於專門處理大型應用的場景。

單頁面應用（SPA）之路

在歷史上，小型頁面是由靜態 HTML 和一些零散的 JavaScript 組成的。我敢打賭如今不少傳統的服務端渲染應用（好比 Django 或者 Ruby on Rails）仍是這樣作的，可是這樣的方式一點也不酷了，因此就算還有人使用它們，可能也僅僅是 API。這些頁面（不論是靜態頁面或者服務端渲染頁面）都有不少特設腳本，它們看上去都一團糟。維護和測試就更像是噩夢，這些代碼要麼就是很是長，要麼就是以某種奇怪的方式鏈接起來。

而當這樣的腳本轉變成了單頁應用，這絕對是一件好事 —— 如今，至少咱們的應用是部分可維護的了，使用了合適的模塊引入，以及許多容許開發者處理複雜接口，路由，多屏數據共享，跨應用甚至整個網站（例如開源組件）的 UI 元素複用的閃亮框架。可是，本篇文章並非關於它們的 —— 我已經吐槽過如今人們已經將 SPA 做爲全部項目的默認選項；這篇文章是關於小型網站的。

jQuery 的興衰

在這以前，jQuery仍是主宰，它有龐大的插件生態圈，提供滑動窗口，圖片展現以及豐富的動態效果等等。同時，它的集成簡單，一般只是用某些參數（甚至是默認值就能夠）初始化一些插件，並提供元素 id。其餘內容一般都在標記中指定（或須要特定的標記規則），HTML 做爲一種聲明式語言，徹底能夠辨認出指定的內容。事實上，jQuery 使用範圍如此之廣，不少人們都很奇怪爲何不把 jQuery 默認的加載到瀏覽器中。jQuery 也有不少很方便的功能（甚至能夠稱爲 DOM 缺失的標準庫），它讓已經簡單的交互變得極其簡單。

事實上，我相信 jQuery 依舊在被普遍的使用着（我沒有任何數據，只是我本身的直覺），可是有了很重要的改變。現在，jQuery 已經不那麼讓人滿意，你也不會發現有不少教程，教你如何不用很瞭解 JavaScript 就快速寫出一個頁面小腳本。同時，大約五年前，庫的標準就是：

• 在一些 CDN 上存儲最小化後的代碼
• 把它提供的功能綁定在全局變量上（好比 window.Backbone）

如今一些庫依舊會打包構建全局模塊定義（UMD），它其實就是一個加載庫的全局變量版，可是不少庫已經不這樣作了。如今，出現了更多的新的框架，這些小插件都是專門服務於框架的了，而你不只僅是須要它們（若是你須要 jQuery 插件，那麼你也須要 jQuery 這個庫），而是須要用這個框架來完成你全部的頁面！

現代解決方案

固然，這個問題已經解決，解決方法就是在已有基礎上提供啓動方式或者特定框架，而後你就可使用這些小插件並編譯爲一個靜態網站。此外，它們會在後臺使用上述工具加載模塊或者編譯代碼，因此你可使用 JavaScript 的最新版本，並將邏輯拆分爲最佳可複用的單元。這種方式的一個很好的例子就是 GatsbyJS 和 Nuxt.js。啓動方式一般是命令行，例如 create-react-app，它將繁瑣的步驟都隱藏了起來，而且僅僅須要給應用一個指令 —— 「只管運行」，而後你就能夠開始編寫組件了。

儘管如此，這種變化帶來了哪些問題呢？代碼的維護性更高了（這都多虧了模塊），你可使用最新版的 JavaScript，還能保證全部不支持的功能都有能夠替代的補丁，這在以前是很容易出現問題的地方。可是其實，問題有不少，在我看來：

• 如今你必須很是瞭解 JavaScript（須要比以前更深的理解）
• 不只是 JavaScript，你可能還須要知道 webpack（爲了處理靜態資源加載 —— 想象一下你突然發現代碼中在引用圖像）
• 如今，你的工做包括了使用大約 200MB 的文件構建應用（而不是編寫文檔）。
• 讓你的小應用膨脹起來是像滑下坡那麼容易的事情。

我認爲最後一部分是最值得關注的。不少教程都會建議你添加一些高級數據管理庫，用某些特定的，「更聲明式」的方法重構你的代碼（想一想那些人常常試圖說服你重構 HTML 結構），而後不少人就會按照教程建議的作了！這些建議是好的，可是可能只適用於大型網站，而不是那種小型的，用 5 個 .html 文件就能完成的。是的，你不能複用這個菜單，可是你能夠直接複製它們（同時 CSS 類讓它在某種形式上能複用了）。

總結

也許我是錯的，也許並無那麼糟糕。可是使用互聯網、閱讀博客、查看網頁時，我以爲這些曾經每一個人只要有 HTML 的只是和極少的 JS 技術就能完成的小型網站，正在慢慢消失，如今更多的網站被替換爲更加「可擴展」的應用了。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。