张硕-58同城本地服务基于Web Components的前端工程实践.pdf

1、58本地服务基于Web Components的前端工程实践主讲人：张硕演讲嘉宾介绍张硕58本地服务技术部 增长前端负责人(搬家、保洁、保姆月嫂等本地服务，58同城、58到家等App、PC、M及小程序)工作经历：15年加入58，曾就职于完美世界、百度彩票等 兴趣爱好：惯孩子、文案输出 个人专长：烤串、写复盘文档CONTENT目录2023K+01业务背景及主要瓶颈Web Components基于Web Components的升级改造方案0203展望及规划04Part 01业务背景及主要瓶颈业务背景-祖传的江山眼睁睁的看着你，却无能为力想得却不可得，你奈人生何组件化对内高内聚，对外低耦合阻碍前端组件

2、化的因素疫情恢复期，不花钱的流量才是好流量业务背景及瓶颈下需要的方案 需满足SEO诉求 需解决跨框架组件使用 需解决现有Java模版调试问题Part 02Web Components什么是 Web Components?是一套不同的技术，允许我们创建可重用的定制元素（它们的功能封装在代码之外）并且在我们的 web 应用中使用它们。https:/developer.mozilla.org/en-US/docs/Web/API/Web_componentsWeb Components就在身边Web Components怎么看？Web Components 技术构成Web Components Sh

3、adow Dom图片来源：MDN Shadow DOMWeb Components 优缺点Web Components的兼容构成的三个技术兼容性基本在95%+Web Components 使用趋势数据来源：https:/ Components的应用场景Web Components、微前端、模块联邦Web Components 总结 SEO诉求 跨框架组件使用 Java模版天然适配Part 03基于Web Components的升级改造方案项目研发流程现状Java服务工程Velocity模版CSSJSJava工程前端工程Java工程部署前端发版页面html模版资源文件1、耗时体现在开发过程-前后

4、端未分离2、问题修复（模版语法操作错误，逻辑错误，RD代码错误）-调试成本高3、问题修复（JS，CSS）-全靠代理4、无法实现ui+逻辑方式同时又满足SEO的模块化开发思想-业务收敛难本地开发页面输出构建部署Java模板调试处理Jar包输出准备安装Java JDK、Maven创建解析工具文件pom配置文件trans.java解析模板引擎文件模版根目录编译输出位置模版入口htmlmock.json模板解析参数jar包webpack构建文件webpack构建transhtml loader处理html文件调用Java Jar包处理Java模板引擎文件命令调用业务mock.json文件输出位置web

5、pack入口文件Java模版根目录Java模版引擎用户访问页面打包后渲染mock数据的html文件启动http-server服务打包Webpack处理模板引擎用户启动服务 页面 逻辑流量自定义 标签 l 插入 ompo t i 主站 Web Components 改造思路Web Components 处理SEOSeo优化Web ComponentsWCsBase页面搜索页面关键词检索TKD语义化标签优化网站内容内部链接优化外部链接优化关键词图片、链接等Slot插入普通、具名处理组件内容布局样式、事件逻辑等渐进式 Web Components 演进-原生组件webpack 自研plugin组件A

6、index.scsstemplate.jsindex.js组件C插入引入模版组装业务逻辑组件B入口JS构建产出.业务代码组件包jspolyfill.js原生 Web Components 问题原生Wcs组件写法偏向操作DOM，仿佛回到了Jq时代styleloader 无法编译原生组件scss样式，扩展webpack plugin从所有js中获取指定css插入标识（$），遍历替换查找1.scss-css2.css-autoprix-添加前缀3.css-cssno-压缩替换scss-plugin业务代码目标目录css文件写入模板shadow-rootWeb