所有 NextJS 页面都有几乎相同的 JS 包大小
All NextJS pages have almost the same JS bundle size
所以,我已经使用 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
}]
]
}
this pull request的评论说明了一切。
This pull request updates a page's "Size" to only be its own set of dependencies.
This PR also adds a new "First Load" column which includes shared size, and moves coloring to that column (since first load is what matters for budgets).
这就是我在做一些研究后能够弄清楚的。当你从一个导出一堆 React 组件的文件中导入东西时,你的模块打包器还不够智能,无法确定你将使用哪些组件,所以它默认包含所有这些组件,因此你有一大捆。
因此,无论您是否使用这些组件,它们都将仍然包含在一个巨大的捆绑包中。 Nextjs 默认使用 Webpack Code Splitting,但由于每个组件都来自相同的路径,我的情况是 ~/components,Next(或 Webpack)无法拆分它向上,因此它将它们全部包含在一个包中,该包被添加到每个页面,无论该页面是从该路径导入一个组件还是 100 个组件。
这就是为什么我看到每个页面都有巨大的包大小的原因。 ~/components 中有将近 1000 个组件,我在该目录中有一个索引文件,可以导出所有这些组件。这样我就可以简单地做
import { Component101, Component204 } from '~/components'
但是捆绑包的大小是巨大的。所以,为了解决这个问题,我在我的 Webpack 配置中添加了 Tree Shaking。该术语最初来自 Rollup,它是另一个流行的模块打包器,如 Webpack。如果您使用的是 Webpack,可以找到有关 Tree Shaking 的更多信息 here
使用 Tree Shaking,任何未导入任何地方的代码都将被删除,并且不会包含在包中,因此您将获得更小的包。但一定要留意任何副作用。这是我添加 Tree Shaking 后所有页面的包大小:
如果您不想使用 Tree Shaking,另一种方法是只使用相对导入,但我不确定这是否是针对大型应用程序的推荐方法。
所以,我已经使用 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
}]
]
}
this pull request的评论说明了一切。
This pull request updates a page's "Size" to only be its own set of dependencies.
This PR also adds a new "First Load" column which includes shared size, and moves coloring to that column (since first load is what matters for budgets).
这就是我在做一些研究后能够弄清楚的。当你从一个导出一堆 React 组件的文件中导入东西时,你的模块打包器还不够智能,无法确定你将使用哪些组件,所以它默认包含所有这些组件,因此你有一大捆。
因此,无论您是否使用这些组件,它们都将仍然包含在一个巨大的捆绑包中。 Nextjs 默认使用 Webpack Code Splitting,但由于每个组件都来自相同的路径,我的情况是 ~/components,Next(或 Webpack)无法拆分它向上,因此它将它们全部包含在一个包中,该包被添加到每个页面,无论该页面是从该路径导入一个组件还是 100 个组件。
这就是为什么我看到每个页面都有巨大的包大小的原因。 ~/components 中有将近 1000 个组件,我在该目录中有一个索引文件,可以导出所有这些组件。这样我就可以简单地做
import { Component101, Component204 } from '~/components'
但是捆绑包的大小是巨大的。所以,为了解决这个问题,我在我的 Webpack 配置中添加了 Tree Shaking。该术语最初来自 Rollup,它是另一个流行的模块打包器,如 Webpack。如果您使用的是 Webpack,可以找到有关 Tree Shaking 的更多信息 here
使用 Tree Shaking,任何未导入任何地方的代码都将被删除,并且不会包含在包中,因此您将获得更小的包。但一定要留意任何副作用。这是我添加 Tree Shaking 后所有页面的包大小:
如果您不想使用 Tree Shaking,另一种方法是只使用相对导入,但我不确定这是否是针对大型应用程序的推荐方法。