名称 源码 线上网址 技术栈
美团PC端 源码 线上 原生React+antd+Koa+mongoose
美团移动端(推荐) 源码 线上 umi+dva+antd+Koa+mongoose
美团后台 源码 线上 vue+nuxt+elment+Koa+mongoose
饿了么多端开发 源码 线上 taro+taro-ui
饿了么微信小程序 源码 暂无 原生微信小程序
后台管理系统 (力荐) 源码 线上 TS + Hooks + Redux
React封装自己组件 源码 线上 TS + Hooks

开场白

哈哈哈,纯属啰嗦着玩,经过shansan大佬的提醒发现,自己确实很久没有更新博客了,最近一直在研究一些源码(纯属瞎搞),然后自己写了一个Demo,也算是对于两大框架的综合练习吧,今天就说一下我踩到过的坑

实战合集

包含上面在内的听多实战合集,每个都是跑通了几个小页面之后,就没有继续往深了去写

主要是对于技术栈的练习和踩坑的过程

除去实战,最近还写了一个Demo合集,大概包含了我2020年学到过的全部知识点

踩过的坑

  1. 由于React属于单页面应用,在页面跳转的时候,路由是不会回到顶部的,需要单独提炼一个组件

  2. React在开发期间如果想要配置代理的话需要使用第三方包http-proxy-middleware,在package.json中配置的proxy只能配置为字符串格式

  3. 关于React的鉴权,有三种形式

    • 第一种使用react-router配置的路由守卫onEnter在内部进行判断是否可以进入页面
    • 第二种是使用一个独立的layout布局页面,把需要守卫的路由都设置为他的props.children这样子(antd-pro)采用的是这种形式
    • 第三种比较推荐,使用的是配置式路由,把路由拆分为一个对象,和vue-router一样的原理,然后利用HOC的特性进行编写
  4. 关于前后端交互安全问题,使用jwt规范,把需要守卫的请求用jwt包裹起来,如果没有携带token,则返回401状态码

  5. 对于React中的redux的数据不可变,直接使用immutablejs来操作,既可以提高性能,还可以解决数据直接修改的问题

  6. 其中在React中使用到了百度地图的API,但是在React内部组件中使用的时候,就必须要用widown.BMap等格式引用

小声逼逼,vue的话没碰到,可能是做的太小了,其中就是在nuxt部署的时候出现了点问题

性能篇

  1. 配置各类按需加载,就是使用babel提供的第三方包来配置

  2. 期间内对于图片的预加载和懒加载配置,预加载是先用new Image()来读取,等计数达到数量再显示页面.懒加载就是用一个base64编码的图片先覆盖,等滚动的时候加载

  3. 修改webpack

    • 配置webpack-bundle-analyzer来进行打包文件大小的分析

    • 把公共文件提取,例如React,ReactDom,Vue等包,使用cdn引入,减少每个页面的引用次数

    • 配置externals来让防止import包导入到bundle中

    • 资源内联,把一些不影响性能的包直接内联到页面中,使用raw-loader


 评论


Copyright @ 2019 SH'S BLOG   |   冀ICP备19013084号-1   |   载入天数...载入时分秒...   |   站长统计   |  
commit168
WordCount67.3k