为什么要代码分割

日常我们会通过 webpack 打包我们的应用，产生一个 bundle.js 文件。随着我们的项目越写越复杂，bundle.js 文件会随之增大。 由于该文件是唯一的，所以不管用户查看哪个页面、使用哪个功能，都必须先下载所有的功能代码。 当 bundle.js 大到一定程度，就会明显影响用户体验。此时，我们就需要 code splitting ，将代码分片，实现按需异步加载，从而优化应用的性能。

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

关键渲染路径
css中@import与link的区别
转自阻塞渲染的 CSS

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，尽快提供它，并利用媒体类型和查询来解除对渲染的阻塞。

What?

通过对浏览器内置的History及API进行封装，使操作history更统一(Hash，H5 API等)、方便切换。

The history library is a lightweight layer over browsers’ built-in History and Location APIs. The goal is not to provide a full implementation of these APIs, but rather to make it easy for users to opt-in to different methods of navigation.

What

A Redux binding for React Router v4 and v5

阅读全文 »

What

Official React bindings for Redux

前言

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

这是 redux 作者 Dan 对 middleware 的描述，middleware 提供了一个分类处理 action 的机会，在 middleware 中你可以检阅每一个流过的 action，挑选出特定类型的 action 进行相应操作，给你一次改变 action 的机会。

redux是一个非常小的库，了解其工作原理对我们日常开发也是很重要的

createStore

源码是redux库的核心，主要包含3个方法

作用

React本身只是一个UI层，并不是Web应用的完整解决方案。没有解决代码结构、组件之间通信、数据共享及职责划分等问题，对于大型复杂应用来说恰恰是最关键的。Redux则跟MVC架构是同一类东西，统一了代码结构，使项目逻辑更加清晰、易维护。

Action

• Action是普通的plainObject，其中type属性是必须的。

  阅读全文 »

总结了下前端与后端交互常用的发请求方式，环境fetch+eggjs