我是如何使用ES6重写电商网站官网的？

缘由

前段时间公司决定重构电商业务系统，主要原因是希望把后端语言 .Net 重构成 Java 以方便招聘，同时重新设计了 UI。而我被临时调到MRO架构业务组重写电商官网前端界面。在完成了 电商主页 - 商品列表页 - 商品详情页后 又被原项目组老大要回去（感觉自己真的很像东西的感觉。。。）写项目组内部使用的微前端框架 Vue-MFE，先把链接放出来，等万事具备了开源之后就可以直接访问了（鸡贼。。。）。

调查

但是，既然要重写电商官网，就一定要秀。不秀，怎么对得起重写和KPI，对吗？于是，我开始思考怎么重写？在写之前，我看了下目前国内主流电商官网和它们的前端技术解决方案。那就在这里做个小小的概览吧：

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，不想再回到刀耕火种的年代。

而电商又比较在意SEO，而架构团队又并不太愿意使用 node-SSR，因此使用 next(React)/nuxt(Vue) 的建议被闲置（未被否也未被采用）。尽管后来还是上了 VueJS，但是使用的方式却是浏览器原生的方式，没有任何构建工具。对后端工程师而言，真是挺苦逼的。最终问过当时团队 leader 对于前端技术栈的选择方面的要求时，他的答复是：十个前端九个能上手。于是最后将技术栈改成了 webpack + jQuery + pug(模版引擎)。

• Webpack - 快速高效的开发，热加载、自刷新、代码分块，都是前端工程的痛点。
• jQuery - 则是应 Leader 的要求，因为项目后端会 参与维护，以及需要大部人都能理解和修改。
• pug - 则是 nodeJS 的模版语言，类似 python 的空格语法非常简单干练。
• sass - CSS预处理器

这一套就达到了愉快的开发体验。

开始

用了一天的时间编写 webpack 的配置和调试构建工具。

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

项目结构变成了这样：

/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 配置根据自己需求做下微调即可。

组件

因为用 jQuery 历史悠久，社区有许多沉淀。但是还是有很多特定业务的组件，也自己实现了一把：

• CheckBox JS实现的自定义 Checkbox。
• InputNumber 电商购物车加减按钮，功能丰富。支持 最大、最小、浮点数、步长等。
• OpacityBanner 电商首页透明切换等banner，类 tmall 首页 banner 效果。
• PreviewSwitcher 电商 商品详情页，动态切换预览图。
• CategoryMenu 电商 懒加载 种类菜单列表，优化首屏渲染很有效果，支持服务端数据和本地数据。
• Cascader 电商切换区域的级联选择器
• *LazyLoadDOM 电商客户端渲染，根据用户交互懒加载特定的 DOM 节点。jquery.inview + AUI template engine

PS: * 开头表示还未上传最终代码。而且在后续的需求中，根据业务调用及其他组使用的细节也更改了一些部分，无法做到实时更新。

结果

在调研和编码完成后，在前端上新的按需加载电商官网当然比原先加载所有DOM的官网使用性能和流畅度好得多。无论是跑分、性能、应用大小、Code Coverage 都是非常巨大的提升。具体数据和什么网站？因为现在还在内测中。而且我在写完主要三个界面后被原组长调回，有机会在后续贴图。

思考

对于后端工程师而言，用 HTML template 的方式写着 Vue 的确慢且痛苦。而且各种特效各种库梭哈的做法，也的确无法保证 用户体验 和 开发体验。而后续维护和代码质量，以及公司是否在意又另当别论了。

echo 'So, Do u have freestyle?'

REFERENCES

• why-performance-matters from Google
• TTI & FCP from Google