相关疑难解决方法(0)

在一个更大的项目中，我使用了相当多的第三方库，包括 firebase、redux 等，以及一些更具体的库（但仅在几个页面上使用），例如 konvaJS、jimp，...我最近刚刚迁移到 nextJS 来加速网站并可能允许 SSR。然而，迁移后，Lighthouse Speedtest 与 Pure React 版本相比有所下降。主要问题似乎是共享 JS 首先加载包。

经过一些优化，包括使用延迟加载更大的组件dynamic()和模块await import()，我成功地将共享的首次加载 JS 包压缩了一半，但它们仍然在 400KB 左右，这太重了。我猜想 Firebase 之类的重型模块也包含在那里，因为应用程序中基本上到处都需要它。

我还尝试分析与 的依赖关系@next/bundle-analyzer。但可视化并不容易解释。它是否还列出了延迟加载的模块？此外，我还有一些依赖项多次打包在不同的包中。最后但并非最不重要的一点是，分析器可视化的包与build输出的名称不匹配。

任何有助于减少或更好地理解该过程的帮助都将受到高度赞赏。我正在使用当前的 React 和 Next.js 版本。

编辑：这是构建后共享 JS 包的组成：

Edit2：我仍然对bundle-analyzer的输出感到困惑。jspdf例如，该模块仅在一个页面/组件中使用并且延迟加载。它在分析仪中仍然可见是否正确？它对共享 JS 包大小没有任何影响。

Edit3：我设法延迟加载我的 firebase 模块（这对我的应用程序至关重要），因此我节省了超过 200KB 的共享 JS 大小。还是希望能减少剩下的。顺便说一句，捆绑分析器的输出并没有真正改变。

我的其中一个页面有一个非常大的包大小。

如何改进 Next.js 中页面的首次加载？

请看一下截图：

我刚刚创建了 NextJS 应用程序，第一个加载包大小约为 1.5Mb。这是我第一次使用 Nextjs，据我了解 1.2Mb 是非常大的。我附上了纱线构建的图像以及我的package.json.

我的应用程序中的所有页面都从数据库查询，现在页面呈现为静态 html。

我已经尝试了所有基本的东西，例如使用 ES6 导入（用于有条件渲染的组件），但这些都不起作用。我认为问题在于我的所有页面首先从数据库中获取数据（如果我错了，请纠正我），但是我不太确定如何解决这个问题。

我知道我可以使用 useEffect 直接从前端获取数据，但是我不知道这是否会减少构建大小。

如果有人有使用 NextJs 的经验，如果他们能够查看我的项目并让我知道哪里出了问题，我将非常感激。

谢谢！

包.JSON

  "dependencies": {
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@next/bundle-analyzer": "^13.0.2",
    "dotenv": "^16.0.3",
    "framer-motion": "^7.6.5",
    "moralis-v1": "^1.11.0",
    "next": "latest",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-moralis": "^1.4.2",
    "react-redux": "^8.0.4",
    "web3uikit": "^0.1.159"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2",
    "url-loader": "^4.1.1"
  }
}

捆：