缘由

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

调查

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

PS: 能力有限，如果错误，烦请指证。

技术栈

Ali 系技术栈是： +

JD 系技术栈是： + (讲实话我并不清楚那里用了，没有仔细翻代码)+ (掏出神器)

优化技术

Server 仅渲染首屏必要 DOM节点，后续渲染交由客户端按需渲染，优化的时间。

lazy rendering DOM elements + lazy loading Images

template syntax

懒加载侧边栏菜单类似

.webp 图片格式

分比例图片（默认加载缩略图，放大后加载高清图）

HTTP2.0

Cache-Control

DNS-Prefetch

LINK PreFetch/PreLoad

- 仅淘宝使用了这项技术，而天猫没有??~

思路

由于最近两年一直使用 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

support

项目结构变成了这样：

/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.jsonbabel.config.js

PS: 需要构件系统代码？我觉得照着 CRA 或者 VUE-CLI 源码中的 webpack 配置根据自己需求做下微调即可。