所有 NextJS 页面都有几乎相同的 JS 包大小

Posted 2023-03-13

【中文标题】所有 NextJS 页面都有几乎相同的 JS 包大小

【英文标题】：All NextJS pages have almost the same JS bundle size

【发布时间】：2021-02-05 15:20:43

【问题描述】：

所以，我已经使用 NextJS 有一段时间了，我从来没有真正查看过构建文件夹，也没有在构建成功时查看过控制台中显示的信息，但我确实注意到有一次奇怪的事情 看看吧。

我一直在使用 TypeScript，并使用 TS 的配置编写了一个小 babel 配置以使用绝对路径。所以我导入组件的方式是使用绝对路径 ~/components，它是 ./src/components 的别名。整个应用程序中的所有导入都使用从 ~/components 导入的组件，并且其中还有其他绝对路径。所以，这就是我在构建应用程序时看到的内容

注意到每个页面的大小几乎相同吗？甚至 about 和 404 页面也很大。所以我的猜测是使用绝对导入导入模块是导致问题的原因，因此，每个页面都链接到一个包含整个应用程序代码的 JS 文件。我不太确定，我似乎无法在网上找到任何可以帮助我优化这些页面的资源。老实说，我什至不知道应用程序的哪一部分需要配置。不管是 webpack 还是 babel，我都不知道。所以，我希望能在这方面得到一些帮助，如果我必须添加一些进一步的配置，所以每个页面只使用所需的 javascript。

这是我的 typescript 和 babel 配置：

打字稿

  "compilerOptions": 
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "./src",
    "paths": 
      "~/components": ["./components"],
      "~/styles": ["./styles"],
      "~/assets": ["./assets"],
      "~/types": ["./types"],
      "~/pages": ["./pages"],
      "~/utils": ["./utils"],
      "~/context": ["./context"],
      "~/data": ["./data"],
      "~/services": ["./services"]
    ,
    "allowJs": false,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "target": "ESNext",
    "jsx": "preserve",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitAny": true
  ,
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]

通天塔

  "presets": ["next/babel"],
  "plugins": [
    ["styled-components",  "s-s-r": true ],
    [
      "module-resolver",
      
        "alias": 
          "~/components": "./src/components",
          "~/styles": "./src/styles",
          "~/types": "./src/types",
          "~/pages": "./src/pages",
          "~/assets": "./src/assets",
          "~/utils": "./src/utils",
          "~/context": "./src/context",
          "~/data": "./src/data",
          "~/services": "./src/services"
        
      
    ],
    ["import", 
      "libraryName": "antd",
      "style": true
    ]
  ]

【问题讨论】：

您似乎查看了错误的列。您正在查看的列是基础应用程序的成本 + 这些拆分的资源。即 913kB + 页面大小

是的，没错，但为什么913KB在所有文件中都很常见？例如，404 页面只有两行代码，但在第一次加载时也需要 913KB 的 JavaScript。

这是页面共享的所有框架/库等的成本（例如反应、路由器等）。如果您的页面中只有一两个实际使用此通用代码，您可能可以重构这些页面以动态导入依赖项，而不是将其放在基础应用程序中，但任何解决方案都将在很大程度上取决于您的具体设置。

nextjs.org/docs/advanced-features/dynamic-import

但是即使对于几乎没有代码的页面，每个页面共享的代码也是913KB？绝对导入是否与此有关，因为我相信相对导入会导致文件减少，但我不想采用这种方法

【参考方案1】：

这就是我在做一些研究后能够弄清楚的。当您从导出一堆 React 组件的文件中导入内容时，您的模块捆绑器还不够智能（还）无法确定您将使用哪些组件，因此默认情况下它包含所有这些组件，因此您有一大包。

因此，无论您是否使用这些组件，它们都仍将包含在一个巨大的捆绑包中。 Nextjs 默认使用 Webpack 执行 Code Splitting，但由于每个组件都来自同一路径，我的情况是 ~/components，Next（或 Webpack）无法将其拆分，因此它包含它们都在一个捆绑包中，无论页面是从该路径导入一个组件还是 100 个组件，都会添加到每个页面。

这就是为什么我看到每个页面的捆绑包都很大的原因。我在 ~/components 中有近 1000 个组件，并且该目录中有一个索引文件，可以导出所有这些组件。这样我就可以简单地做

import  Component101, Component204  from '~/components'

但是捆绑包的大小是巨大的。所以，为了解决这个问题，我在我的 Webpack 配置中添加了 Tree Shaking。该术语最初来自 Rollup，它是另一个流行的模块捆绑器，如 Webpack。如果您使用的是 Webpack，可以在 here 找到更多关于 Tree Shaking 的信息

使用 Tree Shaking，任何未在任何地方导入的代码都将被删除，并且不会包含在包中，因此您将获得更小的包。但请注意任何副作用。这是我添加 Tree Shaking 后所有页面的捆绑包大小：

如果您不想使用 Tree Shaking，另一种方法是仅使用相对导入，但我不确定这是否是大型应用程序的推荐方法。

【讨论】：

恭喜你的回答很好！继续加油！

感谢您回答这个问题。确实这是大家在nextjs中主要面临的主要问题

您能否提供示例配置以在下一个 JS 中进行设置？

【参考方案2】：

this pull request 的 cmets 解释了一切。

此拉取请求将页面的“大小”更新为仅是它自己的一组依赖项。

此 PR 还添加了一个新的“首次加载”列，其中包括共享大小，并将颜色移至该列（因为首次加载对预算很重要）。