我是如何使用ES6重写电商网站官网的？
缘由
前段时间公司决定重构电商业务系统，主要原因是希望把后端语言 .Net 重构成 Java 以方便招聘，同时重新设计了 UI。而我被临时调到MRO架构业务组重写电商官网前端界面。在完成了 电商主页 - 商品列表页 - 商品详情页后 又被原项目组老大调回去，写了项目组内部使用的微前端框架 Vue-MFE，先把链接放出来，等万事具备了开源之后就可以直接访问了（鸡贼。。。）。
调查
但是，既然要重写电商官网，就一定要秀。不秀，怎么对得起重写和KPI，对吗？于是，我开始思考怎么重写？在写之前，我看了下目前国内主流电商官网和它们的前端技术解决方案。那就在这里做个小小的概览吧：
PS: 能力有限，如果错误，烦请指证。
技术栈
优化技术
- 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?'
