绑定NextJs中的静态文件

Question

我使用NextJS服务器端渲染我的ReactJS页面，以获得更好的SEO结果。在使用yarn next build进行构建之后，我将收到以下输出：

First Load JS shared by all                                  127 kB
  ├ chunks/2a8530436833c39e06d280d82bbcefd1b28bdcf0.725aa5.js  6.35 kB
  ├ chunks/3447cc651594945a29f1418ed3ec917dab8fe8c4.26f7e2.js  12.8 kB
  ├ chunks/4f3323068d17a9becc07925b0b52a471b8ff8b90.0b3fab.js  9.3 kB
  ├ chunks/9378cb7c4f41039627ab4b4d5ef21fb70e73d776.2d680a.js  12.2 kB
  ├ chunks/e24b49bb20e997e0e0a00faabcb4ca4027dac39b.0f6aa6.js  20.4 kB
  ├ chunks/e2d5c9608f521bed54dbb12a8ee02715eb00a314.f6906d.js  7.4 kB
  ├ chunks/framework.6cc1cc.js                                 42.3 kB
  ├ chunks/main.969068.js                                      6.53 kB
  ├ chunks/pages/_app.437a43.js                                8.4 kB
  ├ chunks/webpack.664410.js                                   1.74 kB
  └ css/f2d19b50b94eb3d8b1f7.css                               3.91 kB

但是，当我在浏览器中加载时，它会加载30多个js文件。

当我使用现场检查时，加载很多文件都有问题，我的页面也坏了。

33/35 couldn't be loaded

Other error
Image
https://example.com/image/logo-tagline-header.svg

Other error
Script
https://scdn.example.com/_next/static/0KgbBjtvW_Wq3XNml9R14/_buildManifest.js

Other error
Script
https://scdn.example.com/_next/static/0KgbBjtvW_Wq3XNml9R14/_ssgManifest.js

Other error
Script
https://scdn.example.com/_next/static/chunks/0491dc81c13d7e9acd18219c64df56f43f3f0b8d.b3af7e59607ba64d489d.js

Other error
Script
https://scdn.example.com/_next/static/chunks/24e6586ca44347c7a87e9151bc6c26060807e959.ad2a1ee0f3ccb6e5c8bb.js

Other error
Script
https://scdn.example.com/_next/static/chunks/24e6586ca44347c7a87e9151bc6c26060807e959_CSS.748f7f460fe4ac62566f.js

Other error
Script
https://scdn.example.com/_next/static/chunks/29107295.257ef2202380ae530f13.js

Other error
Script
https://scdn.example.com/_next/static/chunks/2c8615a0be19ec830caed849ac2224d3c8c7799a.cbbb0cf378076553ad57.js

Other error
Script
https://scdn.example.com/_next/static/chunks/2fdeec1dd73e9fac37c7fe43e94e25219093b2c3.77fa819961b85b56a36f.js

Other error
Script
https://scdn.example.com/_next/static/chunks/310418abd7c25e14a39eeb9f6c3e7c8a15030966.6ded1f76341d4d4cd80e.js

Other error
Script
https://scdn.example.com/_next/static/chunks/3447cc651594945a29f1418ed3ec917dab8fe8c4.26f7e285eeeb7204a682.js

Other error
Script
https://scdn.example.com/_next/static/chunks/3aaf4dc959077322b2204e6c8b60686cc5163e7e.aaf470269a1ca0d18670.js

Other error
Script
https://scdn.example.com/_next/static/chunks/3e085c3633237555077a3328230a581df3fe4269.84e976d095077f94f133.js

Other error
Script
https://scdn.example.com/_next/static/chunks/4625b0c69146b9babcf324a1628a081f403b82f4.d852e46affaebd3e4d16.js

Other error
Script
https://scdn.example.com/_next/static/chunks/4625b0c69146b9babcf324a1628a081f403b82f4_CSS.33fae6201fee986d0584.js

Other error
Script
https://scdn.example.com/_next/static/chunks/4f3323068d17a9becc07925b0b52a471b8ff8b90.0b3fabd2bfc7669ff929.js

Other error
Script
https://scdn.example.com/_next/static/chunks/9378cb7c4f41039627ab4b4d5ef21fb70e73d776.d267725478274cf02b95.js

Other error
Script
https://scdn.example.com/_next/static/chunks/a3ad171a.0b74ead864eb33c0eff8.js

Other error
Script
https://scdn.example.com/_next/static/chunks/d66041f676df49d45662cfc085dfcea116477032.47a75e2bc5a2cae2bd81.js

Other error
Script
https://scdn.example.com/_next/static/chunks/e24b49bb20e997e0e0a00faabcb4ca4027dac39b.0f6aa6a0518acd041f41.js

Other error
Script
https://scdn.example.com/_next/static/chunks/e2d5c9608f521bed54dbb12a8ee02715eb00a314.f6906d8b7eee12956da2.js

Other error
Script
https://scdn.example.com/_next/static/chunks/f662c7cbdb61116c4409f30b12ae9fd00857176d.11e3e0661349aac38c50.js

Other error
Script
https://scdn.example.com/_next/static/chunks/f8df58ad3b966fd8df7e73252f3a4f880cdff1ea.51c48dd1071aeb1e9a8a.js

Other error
Script
https://scdn.example.com/_next/static/chunks/ff23fd39f75777ca47e80aa3f1426324c63fb5b7.7bec9fb7a32fb1ab69aa.js

Other error
Script
https://scdn.example.com/_next/static/chunks/framework.6cc1ccddae33436d21cf.js

Other error
Script
https://scdn.example.com/_next/static/chunks/main-969068c004a8911c2139.js

Other error
Script
https://scdn.example.com/_next/static/chunks/pages/_app-9297f70de2b6a249b577.js

Other error
Script
https://scdn.example.com/_next/static/chunks/pages/company/%5Bid%5D/%5Bindex%5D-6cbf2a6aa28c895b21e6.js

Other error
Script
https://scdn.example.com/_next/static/chunks/webpack-18040b90e6a43679e977.js

Other error
Stylesheet
https://scdn.example.com/_next/static/css/0cdef234f40570153c18.css

Other error
Stylesheet
https://scdn.example.com/_next/static/css/23e38b8a025b13526106.css

Other error
Stylesheet
https://scdn.example.com/_next/static/css/7827a7584fe7926a4512.css

Other error
Stylesheet
https://scdn.example.com/_next/static/css/7a2943ac5fd386800d6c.css```
How can i bundle files for a specific page or don't load unused js files?
I set prefetch=false for all Links.
My page has many components in it and it is using MUI theme.

  [1]: https://i.stack.imgur.com/sAYTf.png
  [2]: https://i.stack.imgur.com/MjWbe.png

Answer 1

您需要使用Next.js的独立输出特性，这将只需要Next.js自动处理node_modules对构建时间的重要依赖。

更好地使用其文档以更好地掌握：Next.js特殊文档中关于独立输出的部分