Question

因此，我已经使用NextJS已有一段时间了，在构建成功时，我从未真正查看过构建文件夹或控制台中显示的信息，但我确实一次发现了奇怪的地方看看。

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

注意每个页面的大小几乎相同吗？甚至 about 和 404 页面都是巨大的。所以我的猜测是，使用绝对导入来导入模块是导致此问题的原因，因此，每个页面都链接到其中包含整个应用程序代码的JS文件。我不太确定，我似乎也找不到在线资源可以帮助我优化这些页面。老实说，我什至不知道需要配置应用程序的哪一部分。无论是webpack还是babel，我都不知道。因此，我希望对此有所帮助，并且如果需要添加一些进一步的配置，以便每个页面仅使用所需的JavaScript。

这是我的打字稿和babel配置：

TypeScript

{
  "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", { "ssr": 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
    }]
  ]
}

Answer 1

以下是我在进行一些研究后得出的结论。当你从一个导出一堆 React 组件的文件中导入东西时，你的模块打包器还不够智能（还）来确定你将使用哪些组件，所以它默认包含所有这些组件，因此你有一大包。

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

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

import { Component101, Component204 } from '~/components'

但是包的大小是巨大的。因此，为了解决这个问题，我将 Tree Shaking 添加到我的 Webpack 配置中。该术语最初来自 Rollup，它是另一个流行的模块打包器，如 Webpack。如果您使用的是 Webpack，可以在 here

中找到有关 Tree Shaking 的更多信息

使用 Tree Shaking，任何未在任何地方导入的代码都将被删除并且不会包含在包中，因此您将获得更小的包。但一定要留意任何副作用。添加 Tree Shaking 后，我的所有页面的包大小如下所示：

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

Answer 2

this pull request的评论解释了一切。

此拉取请求将页面的“大小”更新为仅其自身的依赖项集。

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

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

2 个答案: