小编you*_*per的帖子

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

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

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

在此输入图像描述

注意到每个页面的大小几乎相同吗?即使是关于页面和404页面也很大。所以我的猜测是,使用绝对导入导入模块是导致问题的原因,因此,每个页面都链接到一个 JS 文件,其中包含整个应用程序代码。我不太确定,而且我似乎无法在网上找到任何可以帮助我优化这些页面的资源。老实说,我什至不知道应用程序的哪一部分需要配置。到底是webpack还是babel,我不知道。因此,我希望在这方面获得一些帮助,以及是否需要添加一些进一步的配置,以便每个页面仅使用所需的 JavaScript。

这是我的打字稿和 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", …
Run Code Online (Sandbox Code Playgroud)

javascript typescript webpack babeljs next.js

9
推荐指数
1
解决办法
5071
查看次数

标签 统计

babeljs ×1

javascript ×1

next.js ×1

typescript ×1

webpack ×1