使用 nuxt 异步加载样式

Question

如何将样式异步加载到站点。或者在页脚插入样式？

我使用nuxt：2.0.0

我尝试：

• 在 webpack 中添加插件：async-stylesheet-webpack-plugin。但是，在 nuxt 中预渲染添加样式。
• 创建模块。但如何去掉旧样式呢？

谢谢！

Answer 1

我开发模块：

const STYLE_REGEXP = '<link rel="stylesheet" href="(.+?)">'
const STYLE_TEMPLATE = '<link rel="preload" href="$1" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">' +
  '<noscript><link rel="stylesheet" href="$1"></noscript>'

module.exports = async function asyncCss (options) {
  this.nuxt.hook('render:route', renderRouteHandle.bind(this))
}

async function renderRouteHandle (url, result) {
  result.html = result.html.replace(
    new RegExp(STYLE_REGEXP, 'g'), STYLE_TEMPLATE)
}

对我有帮助https://github.com/nuxt/nuxt.js/issues/2822

Answer 2

在 nuxt 3 中，使用此代码可以避免阻塞渲染。将此代码放在 /server/plugins 上

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html) => {
    const { head } = html;
    const headReplacement = head.map((h) =>
      // optimize css load, avoid blocking render
      h.replace(
        '<link rel="stylesheet"',
        `<link rel="preload" as="style" onload="this.rel='stylesheet'"`
      )
    );

    html.head.length = 0;
    html.head = headReplacement;
  });
});