Javascript 加速盖茨比的表演
我的工作任务是提高我项目的绩效。目前,Google Lighthouse的分数波动较大,但总体来说,分数并不是很高,因此我们正试图找出如何提高其性能,以便向我们的领导层炫耀 我们的项目将整个Gatsby站点作为单个JavaScript包加载。这将从站点创建一个单页面应用程序,允许通过JavaScript快速加载新页面。但是对于像我们的WordPress站点这样大的东西,这会产生一个非常大的包,以兆字节为单位。这个大的包显著降低了页面速度 我不太确定如何处理这个bundle.js的卸载问题,但我发现了一个关于这个主题的有趣文档 虽然我还不完全理解这些文档,但我相信我编辑了这个async-requires.js文件以包含多个导出组件行,这将导致多个javascript包,而不是主要的大型javascript包。如果有多个js捆绑包,站点的加载速度可能会更快,因为它不仅仅是一个捆绑包的瓶颈。因此,页面可以加载到它需要呈现的特定包中,并异步加载它不需要的包 下面是一些我认为与手头任务相关的代码。谈到盖茨比,我还是一个初学者,所以我不确定我能在这里做些什么来提高性能 谢谢你的帮助 async-requires.jsJavascript 加速盖茨比的表演,javascript,node.js,reactjs,gatsby,lighthouse,Javascript,Node.js,Reactjs,Gatsby,Lighthouse,我的工作任务是提高我项目的绩效。目前,Google Lighthouse的分数波动较大,但总体来说,分数并不是很高,因此我们正试图找出如何提高其性能,以便向我们的领导层炫耀 我们的项目将整个Gatsby站点作为单个JavaScript包加载。这将从站点创建一个单页面应用程序,允许通过JavaScript快速加载新页面。但是对于像我们的WordPress站点这样大的东西,这会产生一个非常大的包,以兆字节为单位。这个大的包显著降低了页面速度 我不太确定如何处理这个bundle.js的卸载问题,但我发
const preferDefault = m => m && m.default || m
exports.components = {
"component---src-templates-page-js": () => import("../src/templates/page.js" /* webpackChunkName: "component---src-templates-page-js" */),
"component---cache-dev-404-page-js": () => import("dev-404-page.js" /* webpackChunkName: "component---cache-dev-404-page-js" */),
"component---src-pages-404-js": () => import("../src/pages/404.js" /* webpackChunkName: "component---src-pages-404-js" */)
}
src/templates/pages.js
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import Layout from '../layouts/layout'
import AnalyticsContext, { analyticsEvents } from '../../util/AnalyticsContext'
import Banner from '../WPComponents/Banner'
import CheckmarkList from '../WPComponents/CheckmarkList'
import CopyGrid from '../WPComponents/CopyGrid'
import Drawers from '../WPComponents/Drawers'
import Explainers from '../WPComponents/Explainers'
import Featured from '../WPComponents/Featured'
import Form from '../WPComponents/Form'
import Hero from '../WPComponents/Hero'
import Pricing from '../WPComponents/Pricing'
import PromoApp from '../WPComponents/PromoApp'
import PromoCircles from '../WPComponents/PromoCircles'
import PromoSlider from '../WPComponents/PromoSlider'
import ReachAnimation from '../WPComponents/ReachAnimation'
import Resources from '../WPComponents/Resources'
import SimpleExplainer from '../WPComponents/SimpleExplainer'
import SimpleMedia from '../WPComponents/SimpleMedia'
import Solution from '../WPComponents/Solution'
import Testimonials from '../WPComponents/Testimonials'
import Disclaimer from '../WPComponents/Disclaimer'
const PageTemplate = props => {
const { pageContext, data, location } = props
const components = (pageContext.acf && pageContext.acf.section_page) || []
let helmet
const { yoast } = pageContext
if (yoast) {
const {
title,
metadesc,
opengraph_title,
opengraph_description,
opengraph_image,
canonical,
} = yoast
helmet = (
<Helmet
title={title || ' '}
meta={[
{
name: 'robots',
content: 'noindex',
},
{
name: 'description',
content: metadesc || ' ',
},
{
property: 'og:title',
content: opengraph_title || ' ',
},
{ property: 'og:site_name', content: title || ' ' },
{ property: 'og:type', content: 'website' },
{
property: 'og:description',
content: opengraph_description || ' ',
},
{
property: 'og:image',
content: opengraph_image && opengraph_image.source_url,
},
canonical
? {
property: 'og:url',
content: canonical || ' ',
}
: {},
]}
/>
)
}
return (
<AnalyticsContext.Provider
value={{
...analyticsEvents,
}}
>
<Layout location={location}>
{helmet}
{components.map(component => {
switch (component.__typename) {
case 'WordPressAcf_hero':
return <Hero key={component.id} {...component} />
case 'WordPressAcf_featured':
return <Featured key={component.id} {...component} />
case 'WordPressAcf_solution':
return <Solution key={component.id} {...component} />
case 'WordPressAcf_resources':
return <Resources key={component.id} {...component} />
case 'WordPressAcf_simplemedia':
return <SimpleMedia key={component.id} {...component} />
case 'WordPressAcf_promoapp':
return <PromoApp key={component.id} {...component} />
case 'WordPressAcf_reach_animation':
return <ReachAnimation key={component.id} {...component} />
case 'WordPressAcf_promoslider':
return <PromoSlider key={component.id} {...component} />
case 'WordPressAcf_promocircles':
return <PromoCircles key={component.id} {...component} />
case 'WordPressAcf_testimonials':
return <Testimonials key={component.id} {...component} />
case 'WordPressAcf_banner':
return <Banner key={component.id} {...component} />
case 'WordPressAcf_explainers':
return <Explainers key={component.id} {...component} />
case 'WordPressAcf_copygrid':
return <CopyGrid key={component.id} {...component} />
case 'WordPressAcf_drawers':
return <Drawers key={component.id} {...component} />
case 'WordPressAcf_simpleexplainer':
return <SimpleExplainer key={component.id} {...component} />
case 'WordPressAcf_disclaimer':
return <Disclaimer key={component.id} {...component} />
case 'WordPressAcf_pricing':
return (
<Pricing key={component.id} {...component} />
)
case 'WordPressAcf_checkmarklist':
return <CheckmarkList key={component.id} {...component} />
case 'WordPressAcf_form':
return <Form key={component.id} {...component} />
default:
console.log('Could not recongize type:', component.__typename)
return
}
})}
</Layout>
</AnalyticsContext.Provider>
)
}
PageTemplate.propTypes = {
pageContext: PropTypes.shape({
acf: PropTypes.object,
media: PropTypes.shape({
edges: PropTypes.array,
}),
}),
}
export default PageTemplate
createPages.js
const { createGenericPage } = require('./pageCreators')
const generatePages = allWordpressPage => {
return allWordpressPage.edges.map(edge => edge.node)
}
module.exports = (data, actions) => {
if (!data) {
console.error('createPages()', 'Error', '`data` is undefined')
throw new Error('Error retrieving data: data is undefined')
}
const { allWordpressPage } = data
const pages = allWordpressPage && generatePages(allWordpressPage)
if (!pages) {
console.error(
'createPages()',
'Error',
'Could not build pages. allWordpressPage was falsy'
)
throw new Error('Error retreiving data: allWordpressPage was falsy')
}
pages &&
pages.forEach(page => {
// skip the 'modules' page
if (page.pagePath === '/modules/') {
return;
}
createGenericPage(actions, page)
})
}
gatsby-node.js
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/node-apis/
*/
const fs = require('fs')
const queryAll = require('./util/queryAll')
const createPages = require('./util/createPages')
exports.createPages = ({ graphql, actions }) => {
return graphql(queryAll)
.then(res => {
if (res.errors) {
res.errors.forEach(error => {
console.error('Error:', error.message)
})
}
createPages(res.data, actions)
})
.catch(error => {
console.error('failed to create pages:', { error })
})
}
exports.sourceNodes = ({ actions, schema }) => {
const { createTypes } = actions
const additionalTypeDefs = fs.readFileSync(`type-defs.gql`, {
encoding: `utf-8`,
})
createTypes(additionalTypeDefs)
}
// temporary fix for dev env: https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-469046186
exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
const config = getConfig()
if (stage.startsWith('develop') && config.resolve) {
config.resolve.alias = {
...config.resolve.alias,
'react-dom': '@hot-loader/react-dom',
}
}
}
大约4个月前,我研究了很多,这就是我发现的,但下面的一些原因是由于lighthouse如何在Gatsby网站上确定页面速度的错误,因此一些可能不再正确(例如,使用
fadeIn={false}
和loading=“Earge”
在图像上,使用a
标记,而不是gatsby Link
中的Link
。如果其中一个提示不再正确,请留下评论或编辑
- 使用(大而简单的更改)
- 使用
(删除所有未使用的CSS。如果您使用的是类似引导的CSS框架,则非常有用)
- 在盖茨比图像上使用
和fadeIn={false}
,或将淡入的持续时间设置为较低:load=“eager”
durationFadeIn={250}
- 使用预连接到某些第三方站点
- 如果您有背景图像,请将其拆分为两个图像,一个用于折叠上方,一个用于折叠下方(页面的初始视图必须在开始时加载较少)
- 在让盖茨比进行优化之前,先手动优化我上面的折叠图像。我发现这样做很有帮助,但你可能会找到一个好的开源软件
- 仅在用户滚动经过第三方iFrame后加载它们。例如:
... const ref = useRef() const onScreen = useOnScreen(ref, '0px') let showWidget if (onScreen){ showWidget = true } ... return ( <div ref={ref}> {showWidget && <ThirdPartyIframe /> } </div> )
。。。 const ref=useRef() 屏幕上的常数=屏幕上的使用(参考'0px') 让showWidget 如果(屏幕上){ showWidget=true } ... 返回( {showWidget&&} )
- (尽管)
- (如果这适用于您)
- 不使用
要进一步阅读的资源 在我发布类似帖子的地方,我建议阅读下面的评论,我发现这条帖子最有帮助 此外,我还发布了一些问题,这些问题与提高《盖茨比》项目的灯塔分数有关。上面列出的信息不需要它们,但它们可能会有用,或者你会从中学到一些东西
- ,
...
const ref = useRef()
const onScreen = useOnScreen(ref, '0px')
let showWidget
if (onScreen){
showWidget = true
}
...
return (
<div ref={ref}>
{showWidget && <ThirdPartyIframe /> }
</div>
)