Skip to content

早报@2019-02-23 #65

@whatwewant

Description

@whatwewant

[email protected] - 📣 announcements - npm forum

npm 发布 6.9.0-next.0,可以用 --before 安装某个时间之前的版本,通过 pkgname@npm:[email protected] 安装 fork 后的版本

  • tags: 发布,NPM,NPM 6.9.0-next.0

gridsome 发布 0.5,静态站点生成框架,基于 vue 类似 gastby

  • tags: 发布,Gridsome,Gridsome 0.5,Vue,Gastby,静态站点

Progressive react,如何让 react 站点更快

  • 1 使用 Chrome DevTools Performance 和 React DevTools Profile 检查组件渲染性能问题;
  • 2 减少重新渲染次数
    • 2.1 适当重写 shouldComponentUpdate (SCU)
    • 2.2 对于class组件, 积极使用 PureComponent
    • 2.3 对于函数式组件, 积极使用 React.memo
    • 2.4 Memorize Redux Selectors (使用 reselect)
    • 2.5 虚拟长列表,比如 react-window
  • 3 使用 Lighthouse 测试 app-level 性能
  • 4 改善 app-level 性能
    • 4.1 对于非SSR, 使用 React.lazy split components
    • 4.2 对于SSR, 使用 loadable-components split components
    • 4.3 使用Service Worker缓存必要的文件, 比如 Workbox
    • 4.4 对于SSR, 使用 stream 代替字符串, 也就是 使用 renderToNodeStreamrenderToStaticNodeStream
    • 4.5 无法SSR ? 可以使用 react-snap 这样的库代替;
    • 4.6 对于 CSS-in-JS, 应该抽取关键样式(Critical Styles)
    • 4.7 Make sure your application is accessible. Using React A11yreact-axe;
    • 4.8 添加一个web app manifest,这样你就可以将应用添加到PC或者移动设备桌面了;
  • tags: 文章,React,Devtools,SCU,PureComponent,React.memo,reselect,react-window,Lighthouse,React.lazy,loadable-components,SSR,CSR,renderToNodeStream,renderToStaticNodeStream,react-snap,CSS-in-JS,A11y,Workbox,Service Worker

react-redux 关于 hooks 相关设计的讨论

  • tags: 文章,React,Redux,Hooks

Navi - 基于 hooks 和 suspense 的 react 路由 - Frontarm

  • tags: React,Hooks,类库,Suspense,Router

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions