延迟加载CSS外部资源

借助<link>的媒体查询特性进行延迟加载资源

通过先将媒体查设为非当前类型从而使浏览器降低资源请求优先级并异步加载该CSS资源，待加载完成后切换为当前媒体类型来应用该CSS资源。

<link rel="stylesheet" href="/css/index.css" media="print" onload="this.media='all'; this.onload = null">

延迟向文档中插入<link>

• 使用style-loader的 injectType 和 insert，将style-loader的injectType设为linkTag，可以在javaScript执行时动态的向DOM中插入<link>。编码及效果如下：

// webpack.config.js
{
    module: {
       rules: [
           {
               test: /\.css$/,
               use: [
                {
                  loader: "style-loader", 
                  options: {
                    injectType: "linkTag",
                    insert: function insertAtTop(element) {
                      var parent = document.querySelector("head");
                      if (parent) {
                        parent.insertBefore(element, parent.firstChild);
                      }
                    }
                  }
                },
                cssLoader,
                postcssLoader,
               ]
           }
       ]
    }
}

打包生成的 HTML

页面加载时的 HTMLhead

• 使用mini-css-extract-plugin的insert，可以自定义<link>被插入的位置和时机

// webpack.config.js
{
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        insert: function insertAtTop(element) {
                  var parent = document.querySelector("head");
                  if (parent) {
                    parent.insertBefore(element, parent.firstChild);
                  }
                }
      })
    ]
}

• 在页面加载完成后手动创建<link>元素并配置

// some js file
<script>
  window.onload = () => {
    var link = document.createElement("link");
    link.rel = 'stylesheet'
    link.href = '/css/index.css'
    document.head.append(link)
  }
</script>