Question

我正在使用NextJS来构建SSR Web应用程序，目前只有两个虚拟页面（索引和大约）。该网站加载正常，除了NextJS抛出一堆JS文件：

由于这些都是在编译时创建并注入到DOM中的，因此在页面加载期间会导致多次往返，我很想避免这种情况。有什么方法可以在编译过程中将它们全部串联到单个JS负载中，然后使用某种Webpack中间件将该串联的束注入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;
  },
};

有什么提示吗？

Answer 1

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

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

在NextJS中预取Link时，您要做的是让浏览器在用户单击链接之前获取链接后面页面的JS代码。如果您不希望这种行为，请不要设置prefetch道具。

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

其他捆绑包正是NextJS的工作方式，据我所知，它是经过硬编码（source），但我可能是错的。

使用NextJS时如何将多个JS文件合并为一个捆绑包？

1 个答案: