相关疑难解决方法(0)

我在工作中接到了一项提高项目绩效的任务。目前，Google Lighthouse 分数有所波动，但总体而言，分数并不是那么好，因此我们正在尝试找出如何提高其性能，以便能够向我们的领导者炫耀。

我们的项目将整个 Gatsby 站点作为单个 JavaScript 包加载。这会从站点创建一个单页面应用程序，允许通过 JavaScript 快速加载新页面。但对于像我们的 WordPress 网站这样大的东西，这会产生一个非常大的包（以兆字节计）。这个大包会显着降低页面速度。

我不太确定如何解决卸载这个bundle.js的问题，但我发现了一个关于这个主题的有趣文档https://www.gatsbyjs.org/docs/how-code-splitting-works/

虽然我不完全理解这些文档，但我相信我编辑了这个 async-requires.js 文件以包含多个导出组件行，这应该会导致多个 javascript 包而不是主要的大包。也许如果有多个 js 包，网站加载速度会更快，因为它不仅仅是一个瓶颈。因此，页面可以加载它需要渲染的特定包，并异步加载它不需要的包。

下面是我认为与手头的任务相关的一些代码。对于盖茨比来说，我仍然是一个初学者，所以我不太确定我可以在这里改变什么来获得更好的性能。

感谢您的帮助。

async-requires.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 …