Webpack 如何在使用NextJS时将多个JS文件合并成一个包？

我正在使用NextJS构建一个SSR web应用程序，目前只有两个虚拟页面，分别是index和about。该站点加载良好，只是NextJS抛出了一堆JS文件：

由于这些是在编译时创建并注入DOM的，因此在页面加载期间会导致多次往返，我希望避免这种情况。有没有办法在编译期间将它们全部连接到一个JS负载中，然后使用某种Web包中间件将连接的包注入DOM中？我的

next.config.js

当前看起来如下：

const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
require('dotenv').config();

module.exports = {
  distDir: '.build',
  webpack: (config) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)$/,
        loader: 'emit-file-loader',
        options: {
          name: path.join('dist', '[path][name].[ext]'),
        },
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ExtractTextPlugin.extract([
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
              minimize: true,
            },
          },
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), []),
            },
          },
        ]),
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff&outputPath=static/',
      },
      {
        test: /\.(svg|ttf|eot)$/i,
        loader: 'file-loader?outputPath=static/',
        options: {
          name: '[path][name].[ext]',
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loaders: [
          'file-loader?outputPath=static/',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false',
        ],
      },
    );
    config.plugins.push(
      new ExtractTextPlugin({
        filename: path.join('static', `${process.env.CSS}.min.css`),
      }),
      new webpack.DefinePlugin({
        'process.env.CSS': JSON.stringify(process.env.CSS),
        'process.env.NAVBAR_LOGO': JSON.stringify(process.env.NAVBAR_LOGO),
      }),
    );
    return config;
  },
};

---

有什么提示吗？

由于您正在预取链接，因此您的索引和关于页面已加载

    <Link prefetch href="/">
      <a>Home</a>
    </Link>
    <Link prefetch href="/about">
      <a>About</a>
    </Link>

---

其他bundle就是NextJS的工作方式，据我所知，它是硬编码的（），但我可能错了。

尝试使用动态导入，它只工作过一次，因为我提到的脚本是由NextJS生成的。这些不是我的进口货。当然，所有导入都是动态的。我知道bundle是由于prefetch指令而被提取的，但我确实需要这个功能。我需要的是将所有这些单独的文件（最初加载的文件和由于prefetch指令而加载的文件）合并到一个JS文件中，然后在页面加载时提供给浏览器。可能吗？或者是可取的？好吧，我明白了，在大多数情况下可能不可取，因为页面访问模式对于每个页面都是唯一的，您只想加载可能要执行的js。有一些基于google analytics数据的实验项目将触发一些资源的预取（），但我不知道它是否已经准备就绪。这两个页面没有捆绑在一起的事实通过http多路复用和浏览器缓存实现了平衡，这使得大型捆绑包的效率低于小型捆绑包，明白了吗。我确实怀疑，随着页面的增加，它可能会变得效率低下。谢谢你的确认。我接受你的回答。

    <Link href="/">
      <a>Home</a>
    </Link>
    <Link href="/about">
      <a>About</a>
    </Link>