获得徽章 0
赞了这篇文章
赞了这篇沸点
做了个项目健康检测,性能分析的工具🔧,第一个版本主要是健康分析方面
全局安装后使用,项目地址:
github.com
v0.0.1:
1. 主域,ssl证书时长检测,HSTS检测,重定向检测
2. 首页index.html缓存检测,单页应用不能开启缓存,其他静态资源应该开启强缓存
3. 静态资源http2,资源大小,这里指的是经过http压缩后的大小,缓存开启情况,cdn情况,这里暂时判断的阿里云,后续增加其他项
4. 打开首页时,总共请求的资源大小,另外一个首页加载时间,是用的无界面浏览器检测出来的,后续改成google网站分析提供的值
后续:
可以增加机器人通知功能,检测完后自动通过企业微信机器人,自动发送到群里,(我司正是如此)
google网站性能分析指标添加,developers.google.com,不知道的可以先直接用google网站玩一玩
其他一些能检测的指标
希望能对大家有帮助
全局安装后使用,项目地址:
github.comv0.0.1:
1. 主域,ssl证书时长检测,HSTS检测,重定向检测
2. 首页index.html缓存检测,单页应用不能开启缓存,其他静态资源应该开启强缓存
3. 静态资源http2,资源大小,这里指的是经过http压缩后的大小,缓存开启情况,cdn情况,这里暂时判断的阿里云,后续增加其他项
4. 打开首页时,总共请求的资源大小,另外一个首页加载时间,是用的无界面浏览器检测出来的,后续改成google网站分析提供的值
后续:
可以增加机器人通知功能,检测完后自动通过企业微信机器人,自动发送到群里,(我司正是如此)
google网站性能分析指标添加,
developers.google.com,不知道的可以先直接用google网站玩一玩其他一些能检测的指标
希望能对大家有帮助
展开
5
34
赞了这篇沸点
github.com一个整合打包、状态管理、路由的前端项目。做这个，既是学习webpack、typescript、redux、rxjs、lerna等的过程，也是提供以后起其他项目的一个脚手架，让自己能够脱离create-react-app/umi，写前端的时候，能想更多。
继续努力吧，但行好事莫问前程。
展开
评论
1
赞了这篇沸点
React前端状态管理心得
1. 没有银弹，redux也好，mobx也好，react-easy-state也好，能力加强的同时，学习成本，浏览器兼容成本也加大
2. 绝大大数页面的状态理清后，其实也想象中不那么复杂，首要的应该是注意以下几点：
（1）尽可能减少所需的状态（哪些才是真正需要的），很多数据了包含多维度的状态，不要制造状态(混乱)，真正重要的是数据，而非状态。深入理解，吃透你的数据。
（2）哪些是计算属性，计算属性（仅get，非set）尤其要提出来，不应该set的一定不要set的，逻辑上可能是同样的状态，但搞好两个状态，并同时去set，会导致真实世界混乱。
3. 组件拆分、属性的传递的逻辑性、正确性和清晰性也是状态管理的一部分，而且其重要性丝毫不亚于纯数据的状态。
（1）正确决定组件的从属关系，并尽量减少不必要的组件。（如同节约dom标签一样）
（2）在上面的前提下，属性的传递可以尽量控制在不要超过2层，这样props的数据流向也一目了解
（3）在jsx里，属性传递的写法应采取始终解构的写法，这样最接近函数参数传递的感觉，如：
<BtnGroup$ {...{ pageTitle, survey }} />
const BtnGroup$ = ({ pageTitle, survey }) => {})
（4）计算属性应尽量由上级组件传给下级，从而使尽可能多的组件成为仅接受props并渲染的纯函数组件。
（5）函数属性传递时有意义的命名至关重要。
4. 勿过度追求完美，尤其是在UI与交互上（最难处理的是动画），要做到完美，需要极其复杂的状态管理，应先有一些效果，在保证不至于把状态搞得一团糟，在完全想清楚了数据的逻辑后，逐步加强。
5. react-global-state-hook的非reducer的用法，细粒度的get、set其实基本够用，尤其对状态变化的跟踪（从代码层面跟踪，选中所有get或set）比redux并不差。
6. 一个应用程序，最最核心的，最最复杂的逻辑，就那么几个，绝不会多，所以对这部分页面代码一定要精益求精，逻辑、结构一定要优雅如水。
1. 没有银弹，redux也好，mobx也好，react-easy-state也好，能力加强的同时，学习成本，浏览器兼容成本也加大
2. 绝大大数页面的状态理清后，其实也想象中不那么复杂，首要的应该是注意以下几点：
（1）尽可能减少所需的状态（哪些才是真正需要的），很多数据了包含多维度的状态，不要制造状态(混乱)，真正重要的是数据，而非状态。深入理解，吃透你的数据。
（2）哪些是计算属性，计算属性（仅get，非set）尤其要提出来，不应该set的一定不要set的，逻辑上可能是同样的状态，但搞好两个状态，并同时去set，会导致真实世界混乱。
3. 组件拆分、属性的传递的逻辑性、正确性和清晰性也是状态管理的一部分，而且其重要性丝毫不亚于纯数据的状态。
（1）正确决定组件的从属关系，并尽量减少不必要的组件。（如同节约dom标签一样）
（2）在上面的前提下，属性的传递可以尽量控制在不要超过2层，这样props的数据流向也一目了解
（3）在jsx里，属性传递的写法应采取始终解构的写法，这样最接近函数参数传递的感觉，如：
<BtnGroup$ {...{ pageTitle, survey }} />
const BtnGroup$ = ({ pageTitle, survey }) => {})
（4）计算属性应尽量由上级组件传给下级，从而使尽可能多的组件成为仅接受props并渲染的纯函数组件。
（5）函数属性传递时有意义的命名至关重要。
4. 勿过度追求完美，尤其是在UI与交互上（最难处理的是动画），要做到完美，需要极其复杂的状态管理，应先有一些效果，在保证不至于把状态搞得一团糟，在完全想清楚了数据的逻辑后，逐步加强。
5. react-global-state-hook的非reducer的用法，细粒度的get、set其实基本够用，尤其对状态变化的跟踪（从代码层面跟踪，选中所有get或set）比redux并不差。
6. 一个应用程序，最最核心的，最最复杂的逻辑，就那么几个，绝不会多，所以对这部分页面代码一定要精益求精，逻辑、结构一定要优雅如水。
展开
3
16
赞了这篇沸点
react 团队的前 leader，也是 react 最早的开发者之一，Sophie Alpert，于去年一月从 facebook 离职了。搜了下，似乎是因为公司文化问题（Sophie 是一个变性人）。
离职后，Sophie 仍以开源作者的身份参与 react 开发。去年 react conf，Ta 还贡献了一个演讲：Building a Custom React Renderer。在演讲的末尾，Sophie 说：也许今天的演讲对大部分人来说没什么实用价值，但我希望大家能从中获得一些乐趣，并学到一点原来不知道的 react 知识。
www.youtube.com
离职后，Sophie 仍以开源作者的身份参与 react 开发。去年 react conf，Ta 还贡献了一个演讲：Building a Custom React Renderer。在演讲的末尾，Sophie 说：也许今天的演讲对大部分人来说没什么实用价值，但我希望大家能从中获得一些乐趣，并学到一点原来不知道的 react 知识。
www.youtube.com
展开
9
11