我是如何使用ES6重寫電商網站官網的？

時間 2019-11-25

原文原文鏈接

原因

前段時間公司決定重構電商業務系統，主要緣由是但願把後端語言 .Net 重構成 Java 以方便招聘，同時從新設計了 UI。而我被臨時調到MRO架構業務組重寫電商官網前端界面。在完成了電商主頁 - 商品列表頁 - 商品詳情頁後又被原項目組老大調回去，寫了項目組內部使用的微前端框架 Vue-MFE，先把連接放出來，等萬事具有了開源以後就能夠直接訪問了（雞賊。。。）。css

調查

可是，既然要重寫電商官網，就必定要秀。不秀，怎麼對得起重寫和KPI，對嗎？因而，我開始思考怎麼重寫？在寫以前，我看了下目前國內主流電商官網和它們的前端技術解決方案。那就在這裏作個小小的概覽吧：html

PS: 能力有限，若是錯誤，煩請指證。前端

技術棧

Ali 系技術棧是： KISSY + Sea.js
JD 系技術棧是：Webpack + Nerv.js(講實話我並不清楚那裏用了，沒有仔細翻代碼)+ jQuery(掏出神器)

優化技術

Server 僅渲染首屏必要 DOM節點，後續渲染交由客戶端按需渲染，優化 TTI & FCP 的時間。
lazy rendering DOM elements + lazy loading Images
template syntax
懶加載側邊欄菜單相似jQuery-menu-aim
.webp 圖片格式
分比例圖片（默認加載縮略圖，放大後加載高清圖）
CDN
HTTP2.0
Cache-Control
DNS-Prefetch
LINK PreFetch/PreLoad
PWA Service Worker - 僅淘寶使用了這項技術，而天貓沒有??~

思路

因爲最近兩年一直使用 React\Vue 這樣的前端框架，對於寫 JS 代碼的語法已經習慣了 ES6/7，愛上了 Component 和 Webpack，不想再回到刀耕火種的年代。vue

而電商又比較在乎SEO，而架構團隊又並不太願意使用 node-SSR，所以使用 next(React)/nuxt(Vue) 的建議被閒置（未被否也未被採用）。儘管後來仍是上了 VueJS，可是使用的方式倒是瀏覽器原生的方式，沒有任何構建工具。對後端工程師而言，真是挺苦逼的。最終問過當時團隊 leader 對於前端技術棧的選擇方面的要求時，他的答覆是：十個前端九個能上手。因而最後將技術棧改爲了 webpack + jQuery + pug(模版引擎)。node

Webpack - 快速高效的開發，熱加載、自刷新、代碼分塊，都是前端工程的痛點。
jQuery - 則是應 Leader 的要求，由於項目後端會參與維護，以及須要大部人都能理解和修改。
pug - 則是 nodeJS 的模版語言，相似 python 的空格語法很是簡單幹練。
sass - CSS預處理器

這一套就達到了愉快的開發體驗。python

開始

用了一天的時間編寫 webpack 的配置和調試構建工具。jquery

webpack plugins
- webpack-dev-server
- babel
- eslint
- scss
- postcss
  - autoprefixer
support multiple entries
support css preprocessor
support Vue.js
support pug

項目結構變成了這樣：webpack

/build # 構件腳本內容
  /rollup
  /webpack
/public # 靜態依賴
  - favicon.ico
  - index.html
/src
  /assets # 項目中用到的資源
    /images
    /style
      /components
      /lib
      /mixin
      - pageA.scss
      - pageB.scss
  /includes # 項目中各類能複用的模版/js
    / components # 純組件
      /FooterSiteNav
        - index.pug
      /HeaderHomeNav
        - index.pug
      ...
    /mixins # JS組件
      /Tab
        - index.js
        - index.pug
      ...
    -layout.pug # 基礎佈局模版
  /pages # 頁面相關內容
    /index # 最終會被打包成 index.html
      - index.js
      - index.pug
      - index.scss
    /detail
      - index.js
      - index.pug
      - index.scss
  /plugins # 項目中使用到的 jQuery 插件
    - jquery.inview.js
  /template # 被懶渲染的各類模版文件
    - AdBanner.js # 廣告橫幅
    - Floor.js # 每一個樓層區塊
    - HomeTab.js # 主頁特定的 tab
  /utils # 工具方法
    /api
      - common.js
      - index,js
    - LazyloadModule.js
    - DataUtil.js
    - Observer.js
    - ScrollObserver.js
    - Template.js
  common.js
  theme.scss
# 各類配置文件
.editorconfig
.eslintignore
.eslintrc
.prettierrc
.stylelintrc.json
babel.config.js

PS: 須要構件系統代碼？我以爲照着 CRA 或者 VUE-CLI 源碼中的 webpack 配置根據本身需求作下微調便可。git