.js太多，Nextjs生成.css文件

Question

我正在使用 nextjs 和 Typescript。我实现了我的 Web 应用程序，但在生产模式下，我看到太多 .js 和 .css 文件已加载，并且此过程按顺序而不是并行发生。我认为 nextjs 应该在一个 webpack 文件中生成所有这些过程，但它不会发生。我该怎么办？对字体、图像、js 文件和 .css 文件有任何想法吗？还有一点我应该说。我正在使用与 Nextjs 文档中提到的指令相反的 SCSS 文件，它们被放置在 components 文件夹及其子文件夹中，而不是 styles 文件夹中。

const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

// next.js configuration
const nextConfig = {
  images: {
    domains: ['ibexcdn.com'],
  },
};

module.exports = withPlugins(
  [
    [
      nextTranslate,
      {
        webpack: (config, { isServer, webpack }) => {
          return config;
        },
      },
    ],
    withBundleAnalyzer,

    [
      withPWA,
      {
        pwa: {
          disable: process.env.NODE_ENV === "development",
          dest: 'public',
          runtimeCaching: [
            {
              urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
              handler: 'NetworkFirst',
              options: {
                cacheName: 'static-font-assets',
                expiration: {
                  maxEntries: 4,
                  maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
                }
              }
            }
          ]
        },

      },
    ],
  ],
  nextConfig,
);

Answer 1

看起来您向组件添加了很多导入，创建了一个包含 1 个 API 请求的空页面，并查看了加载的资源和脚本。

之后，尝试逐一添加组件，看看会发生什么。

这是检查发生了什么的唯一正确方法

另外，delete libs 您没有用于您的项目，请检查您的项目的package.json 文件。