如何配置nuxt.config使CSS文件优先于JS文件加载？

算力阿峰

2026-8-13

问题

我在nuxt.config文件中配置了extractCSS: true，该配置会拆分所有CSS文件，但当前页面的资源加载顺序是先JS后CSS。根据前端最佳实践，应该优先预加载CSS文件，但我的NUXT项目里JS代码块会被优先导入，之后才加载相关CSS文件。当前页面生成的预加载标签如下：

<link rel="preload" href="/_nuxt/app~._.nuxt_A.js" as="script" />
<link
  rel="preload"
  href="/_nuxt/app~._.nuxt_A.css"
  as="style"
/>
<link
  rel="preload"
  href="/_nuxt/app~._assets_scss_main.scss~c.css"
  as="style"
/>
<link rel="preload" href="/_nuxt/app~._c.css" as="style" />
<link rel="prefetch" as="script" href="/_nuxt/2.js" />
<link
  rel="prefetch stylesheet"
  href="/_nuxt/3.css"
/>

请问如何配置nuxt.config，使CSS文件的预加载标签在JS文件之前插入？

解决方案

你可以通过在nuxt.config.js中扩展Webpack配置，修改html-webpack-plugin的资源排序规则，让CSS资源的预加载标签排在JS前面。具体配置如下：

export default {
  build: {
    extractCSS: true,
    extend(config, { isClient }) {
      if (isClient) {
        // 找到html-webpack-plugin实例
        const htmlPlugin = config.plugins.find(plugin => plugin.constructor.name === 'HtmlWebpackPlugin')
        if (htmlPlugin) {
          // 自定义资源排序逻辑：style类型资源优先于script
          htmlPlugin.options.sortAssets = (a, b) => {
            if (a.attributes.as === 'style' && b.attributes.as === 'script') return -1
            if (a.attributes.as === 'script' && b.attributes.as === 'style') return 1
            return 0
          }
        }
      }
    }
  }
}