react实战中的技术栈

发表于 |

这篇文章主要想写一下 react-router 和 react 中的懒加载、预加载与项目中关于 service-worker 的一些学习。

由于 react 只是一个UI的框架，在稍大型的项目中就避免不了使用路由的情况会出现。路由的作用就是将对应的url与函数映射，在单页应用中路由用来控制页面上展示的元素的内容。

React-router

首先 react-router 需要安装 use npm or yarn 。 

1
2
npm install react-router-dom --save
yarn install react-router-dom --save

在项目中使用参考官网给出的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
      </ul>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </Router>
)

Code-Splitting

react 中的懒加载可以说是多种多样的了，既可以使用 webpack 配合各种插件来实现懒加载也可以使用，也可以使用react提供的一个高阶组件 loadable来实现，本文主要说明一下 loadable 的使用。

首先 loadable 需要下载：

1
2
npm i loadable --save
yarn i loadable --save

因为 loadable 默认的使用需要加载一个被懒加载的组件和一个loading，所以在代码中可以对 loadable 进行一次封装 以便在使用的时候仅需传递一个组件即可。

1
2
3
4
5
6
7
import Loadable from "react-loadable";
import Loading from "./Loading";

const Home = Loadable({
  loader: () => import('../Home'),
  loading: Loading
})

SPA的预加载

首先单页应用用在web端会有一个明显的不足就是网站的SEO会受到严重的影响，但是 SPA 的开发模式在现在的前端领域却占有很大的比重，为此各种SEO的操作便诞生了。

首先本文要讲的是使用webpack的插件 prerender-spa-plugin 来生成网站已经填充内容的静态HTML，关于SPA预渲染 博客中另一篇文章讲的比较详细。在此就简单的说下这个插件的作用。

在使用 prerender-spa-plugin 的时候 webpack会在打包的最后在本地开启一个Puppeteer 的无头浏览器，并在 Puppeteer 中渲染我们传入的url，并且将静态的Html保存到本地的一个操作。

Service-Worker

关于 Service-Worker 之前也写过两篇博客详细的介绍这个 API的使用。

Service-Worker 在前端的强大可以直接让很多的前端工程化达到一个前所未有的高度，在react中也是积极的跟进了这一技术， 我们在使用 create-react-app 新建的项目中就可以直接在打包的时候生成一份 service-worker.js 的文件。由react提供

hi you can see me