如何解决Google PageSpeed Insights显示未使用的JavaScript,但已使用
使用了Javascript,但Google Page Speed Insights显示未使用Javascript。无论如何,我可以将其删除。在这里,我分享了PageSpeedInsight报告的屏幕截图。
在上面的屏幕截图中,您可以看到8个js文件未使用。但是它正在我的应用程序上使用。
解决方法
您可以滚动加载脚本文件。当用户开始向下滚动时,可以将脚本标签附加到头部,然后再次删除事件侦听器。
仅添加开始时在视口中不可见的脚本,例如recapchas。通常位于底部。
function dynamicLoad(url) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
window.addEventListener("scroll",loadScripts);
function loadScripts() {
//load here as many dynamic scripts as you want
dynamicLoad("recaptcha url");
dynamicLoad("facebook.net url");
//end ------
window.removeEventListener("scroll",loadScripts);
}
,
注意:此答案是由于混乱。 OP未使用React,但报告包含React示例。这可能对其他人有帮助 无论如何。
如果组件是动态加载的(仅在用户请求之后)。
您可以按照报告中的建议使用React.lazy()
进行代码拆分,这样就不必在不需要时加载大捆绑包。
此解决方案适用于非SSR。
之前:
import ComponentB from './ComponentB';
function ComponentA() {
return (
<>
{/* After certain action probably like routes switch or any? */}
<ComponentB />
</>
);
}
之后:
import React,{ lazy } from 'react';
const ComponentB = lazy(() => import("./ComponentB.js"));
function ComponentA() {
return (
<>
{/* After certain action probably like routes switch or any? */}
<ComponentB />
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。