Create-react-app pagespeed 混淆

Question

我在使用 google

的 this 工具时遇到了页面速度问题

我的目标是在 pagespeed insights 上达到 ~95；

我使用 create-react-app，然后：

在 nginx 中为所有项目文件启用 gzip，
已按照 Google、
使用 loadCSS polyfill 来避免 css-在页面呈现时阻塞（我放置了 sanitize.min.css 的链接，以及我在 public/index 中使用的 slick-carousel。html 根据建议),
使用 fontfaceobserver here 按照建议加载字体，
检查了我的 css 文件，将 js 文件中的内联css 数量减少到最少

我当前的 pagespeed 是 Medium(72) 和 Good(85)，PageSpeed Insights 建议删除阻止下载的 JS 文件（这是我的 main.js 来自 React）并优化 CSS 交付（这是我的main.css），并利用浏览器缓存（我认为这里不是这种情况）。

我看到了类似的问题，我尝试使用代码拆分（来自 this tutorial）将页面作为块加载，但它只会将页面速度从我现在拥有的速度降低到移动和桌面的 40-70分别这对我来说毫无意义，因为为什么更小的代码块会这样做？我也尝试了不同的 react-router code-splitting 方法，但它们根本没有帮助提高页面速度，甚至使它变得更糟。

我认为问题可能是我

@import "material-components-web/material-components-web";

在我的 index.scss 中，它本身就很重，我尝试导入单独的 MDC 包，但它根本没有影响页面速度。在我的案例中，如何才能达到所需的 90+ pagespeed？谢谢！

Answer 1

好吧 create-react-app 是一个广泛的入门项目，这意味着它是在考虑不同事物的情况下创建的，因此，~50- 100 个依赖项，其中大部分你可能没有need/use。如此简单的工具也有这样的缺点。如果您是初学者，这是一个非常棒的工具，如果您是高级用户，您会发现必须弹出才能进行更高级的配置更改。

如果你真的需要为你的每一个需要调整它，你需要弹出，然后开始切断你不需要的依赖，但如果你是初学者，我会说坚持下去.

我知道这不是您问题的精确答案，但宽泛的问题会得到宽泛的答案:)

Create-react-app pagespeed 混淆

Create-react-app pagespeed confusion

javascript

css

nginx

pagespeed

reactjs