为了让我们的网站能达到更高的评分（咦，为什么变成刷分了），我们最后需要进行用户体验和性能的优化。
我们需要尽可能把其他所有页面做成异步的，如：
function getSubmitCase(nextState, callback) { require.ensure([], (require) => { callback(null, require('./containers/case/SubmitCasePage').default); }, 'SubmitCasePage');}<Route path="submit" getComponent={getSubmitCase} />通过把非首页面路由给大部分变成异步化的后：
原来都是黄色红色的，现在大部分变成了绿色。
页面在脚本（javaScript）不可用的时候仍然包含一些内容，即便它只是一个给用户的警告，官方文档见：no-js。
复杂地话，我们需要能输出静态页面，但由于我们是纯粹的客户端渲染，没办法那么做，所以一切从简，考虑直接在无法使用 JS 的时候输出提示。
具体怎么做呢？不用急，还真有个标签可以直接拿来用：
<noscript>Your browser does not support Javascript!</noscript>放在 body 里面就好了。
考虑到应用场景，这个就不加了（更何况报的一些其实是 ant design 的问题）。
还有一个是我们 form 表单没有使用 label（因为使用了 icon 来示意），这个提示有点傻逼，无视它。
请求链路的优化，主要是因为一些静态文件的依赖比较多（CSS、js、图片）。没有想到特别好的方法，官方解释见：Critical Request Chains，应该需要尽量做成异步非阻塞的，并减少 roundtrips 数量。
CSS 文件大，容易导致阻塞，因为 CSS 会被默认处理为渲染阻塞的资源。
可以先阅读 Google 的这一篇文档：Render Blocking CSS。
因为通常在 CSS 文件未正确加载前，我们的页面会无法正常使用，所以唯一的优化方案就是让加载 CSS 变得更快。
可是具体怎么做呢？其实 link stylesheet 有一个标签 —— media，也就是我们熟知的 media query：
<link href="style.css" rel="stylesheet"><link href="PRint.css" rel="stylesheet" media="print"><link href="other.css" rel="stylesheet" media="(min-width: 40em)">第一个 stylesheet 就是我们以往常用的，被应用在所有场景，总是会阻塞渲染。第二个 stylesheet 在内容被打印后才应用 —— 可能你会想要重新排版布局，改变字体等等，所以不会阻塞页面的首次加载。第三个使用了 media query，会被浏览器执行，如果条件负责，则会阻塞到该 stylesheet 被下载并处理完毕。再来看几个例子：
<link href="style.css" rel="stylesheet"><link href="style.css" rel="stylesheet" media="all"><link href="portrait.css" rel="stylesheet" media="orientation:portrait"><link href="print.css" rel="stylesheet" media="print">第一个申明在所有条件下都是渲染阻塞的。第二个申明和第一个其实等价，因为如果没有指定 media type 的话，他其实就是 “all”。第三个申明有一个动态 media 查询，在页面加载时进行评估。依赖于加载时设备的方向，portrait.css 可能会阻塞渲染。最后一个在页面被打印时才应用，所以不会在首次加载页面时阻塞渲染。最后要注意的是，阻塞渲染仅仅涉及到浏览器是否要等待资源加载后才进行首次渲染，在任何场景下，浏览器还是会下载该 css 资源的，只不过对非阻塞资源的优先级会低一点。
GitLab 也存在这个问题，见：https://gitlab.com/gitlab-org/gitlab-ce/issues/26080。
找了一下没找到对应的工具，回头试试看：https://github.com/WatchBeam/split-css-loader，暂且先放着了，毕竟目前 CSS 文件还不算太大。
最后的优化结果，竟然达到了97分，还是让我吓了一跳的。
PWA 实践系列到了这里就是尾声了，大家下回见。
新闻热点
疑难解答
