Create-react-app pagespeed混乱

Question

我使用Google的this工具

时遇到了网页速度问题

我的目标是在pagespeed见解上达到~95;

我使用create-react-app，在我发布之后：

• 在nginx中为所有项目文件启用gzip，
• 按照Google的建议压缩所有图片，
• 使用loadCSS polyfill来避免页面渲染时的css阻塞（我放置了sanitize.min.css的链接，以及我在public / index.html中使用的slick-carousel），
• 使用fontfaceobserver
按建议here加载字体
• 检查了我的css文件，将js文件中的inline-css数量减少到最小

我当前的pagespeed是Medium（72）和Good（85），PageSpeed Insights建议删除阻止下载的JS文件（这是我的main.js反应）并优化CSS传递（这是我的main.css） ，并使用浏览器缓存（我认为这不是这种情况）。

我看到了类似的问题，我尝试使用代码分割（来自this tutorial）将页面加载为块，但它只将页面速度从我现在的速度减少到40-70分别用于移动设备和桌面设备。对我没有意义，因为为什么较小的代码块会这样做？我也尝试了不同的反应路由器代码分割方法，但它们根本没有帮助改进页面速度，甚至使它恶化。

我认为问题可能是我

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

在我自己非常沉重的index.scss中，我尝试导入单独的MDC包，但它根本没有影响页面速度。在我的案例中可以做些什么来达到所需的90多页速度？谢谢！

Answer 1

create-react-app 是一个广泛的入门项目，这意味着它是由不同的东西构成的，并且有了它，来自 ~50-100依赖其中大多数你可能不需要/使用。这样一个简单的工具带来了这样的缺点。如果你是初学者，它是一个非常棒的工具，如果你是高级的，你会看到你必须弹出以进行更高级的配置更改。

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

我知道这不是您问题的准确答案，但广泛的问题会得到广泛的答案：）