Shu jia shi xi zong jie

[liyatang]

(转公开，7 months ago)

What I learned？

知识点

• 回顾 React 技术栈
• 回顾和掌握了更多命令行，Git 操作
• 学习 Github gmfe 各种库（待继续学习）
• 掌握和熟悉团队的开发流程和主要项目

开发流

需求评审 =》方案评审 =》开发 =》 联调 =》Review =》发布

• 需求评审，需要和产品确定需求，并根据需求量预估开发时间
• 方案评审，需要整理实现方案，跟团队讨论（这步骤似乎有所欠缺，前端缺乏设计文档）
• 开发，目标就是按时完成，并且高质量啦
• 联调，与后端对接
• Review 代码，首先发 review 前应该自己先全部自己 review 一遍，优化一遍，再发 pr。其次是把本次开发的难点或者好的地方记录下来，及时总结或者分享
• 发布（这里自身待做的是要深刻理解发布、回退脚本，掌握其机制）

项目构建

1、Webpack

• 读写优化 -- 开发时文件生成到内存中，生产坏境才生成到磁盘中
• 缓存优化 -- 分析依赖链时缓存（babel-loader 可以缓存处理过的模块，对于没有修改过的文件不会再重新编译 loaders: ['babel-loader?cacheDirectory']）
• 搜索速度 -- resolve.root 规定范围，resolve.alias 设置别名，module.noParse 忽略某文件不解析打包 ，exclude 设置 loader 不编译的文件夹
• 删除无用的导入 -- eslint 检查，没使用到的导入提示删除
• DLL 分离，将不常改动的文件打包成独立文件，一方面加快业务打包速度，另一方面设置缓存
• css 分离，加快页面渲染，设置缓存
• happypack 多线程打包，加快打包速度
• proxy 设置代理，解决开发跨域请求问题
• 代码分块，按需加载

React

1. @pureRenderDecorator

   利用修饰器，对组件进行封装，目的在于利用 shouldComponentUpdate 做性能优化，类似于 React.PureComponent

2. react-redux 之 connect

   如何解决 props 深层传递问题？

   • 发布订阅模式
   • React context 上下文
   • react-redux connect

   react-redux connect

    <Provider store={store}>
    </Provider>

   通过以上代码，将全局 store 以 props 形式传递到 <Provider> 组件中，随后在容器组件（容器组件 & 展示组件 ）中，通过调用 connect 使全局 store 中的数据作为 props 绑定到容器组件中

---

What I did？

项目完成成果

• 熟悉包括 station、manage、bshop、react-gm、react-mgm 等项目
• 完成了几个需求，包括 bshop 首页重构、地理标签优化，manage、station 菜单、路由优化、tab 标题、文案优化，拼音搜索，react-gm 菜单组件，station 采购任务等优化
• 包括一些杂七杂八的事情，包括 happypack 缓存导致 css 打包不合预期的问题、eslint 4 报错问题、react-gm 优化等

遇到的问题

• 包括对项目的不熟悉而花费的时间（目前从开发到部署，除灰度发布，其余流程基本掌握）
• bshop 首页重构遇到最大的问题是设计稿的问题，假如对设计稿各种细节有严格要求的话，希望设计稿也能按标准带上标注
• tab 标题优化，两个产品给我提了两次需求，虽然都是小事情，但是却浪费时间，改一次标题涉及到station、manage 前后端共四个项目，所以可能希望产品以后能明确、统一点
• react-gm 菜单组件编写存在的问题是对编写组件不够熟悉，在琢磨了多次和修改多次后大致能用，以后要继续尝试和优化
• 在已有项目的基础上开发，改动时需要认真思考和排查、询问相关同事改动处会影响到的地方

Think more

1、css

• 剔除多余 css 代码移动端优化

将没使用到的 css 代码剔除，减少文件体积，适用于移动端

2、部署

• 线上代码定位错误
• source map

3、 脚本错误监控

随着用户量的日益增长，线上 bug 通过产品或运维反馈，显得效率低下，为了减少因此错误导致的损失，可尝试做错误监控

附： 监控平台前端SDK开发实践

---

What should I do from now on？

1. 及时总结
2. 罗列出需要做的事情，安排在计划中，执行力啊
3. 两个月，思考的时间太少，think more

---

Plan to do

• 钉钉机器人
• 发布脚本
• 如何切 CDN、 切 HTTPS
• github gmfe 各种库
• review 他人的代码

---

By BBChen
END（注：个人总结，未经允许不得传阅）