Next.js 中的类似 CSS 块答案

【问题标题】：Similar CSS chunks in Next.jsNext.js 中的类似 CSS 块
【发布时间】：2020-01-30 14:50:22
【问题描述】：

我试图弄清楚为什么 Next.js 会插入两个相似的 CSS 块，就像这样

<link rel="preload" href="/_next/static/css/styles.chunk.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/styles.chunk.css"/>

我只想要一个 rel 等于“预加载”的。我能为此做些什么？在我的 next.config.js 中没有什么犯罪：

const withImages = require('next-images')
const withSass = require('@zeit/next-sass')
const TerserPlugin = require('terser-webpack-plugin')

const env = process.env.NODE_ENV || 'development'

const configs = {
  development: {
    BASE_URL: 'http://localhost:8110'
  },
  production: {
    BASE_URL: 'https://some-url'
  }
}[env]

module.exports = withSass(
  withImages({
    minified: true,
    optimization: {
      minimizer: [new TerserPlugin()]
    },
    env: {
      ...configs,
      ...other options
    }
  })
)

谢谢。

【问题讨论】：

标签： javascript css reactjs sass next.js

【解决方案1】：

这就是预加载链接标签的工作原理。

如果您查看 MDN 上的示例，您会看到与您的布局非常相似的布局，带有预加载链接，然后是样式表链接。

Preloading Content With rel=preload

【讨论】：