Javascript 如何使用Webpack预加载css并作出反应？

我正在使用react和网页5。在运行lighthouse报告之后，我发现了一些需要预加载的css文件。如何在网页包中执行此操作

webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require( 'path' );
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
   context: __dirname,
   entry: './src/index.js',
   output: {
      path: path.resolve( __dirname, 'build' ),
      filename: '[name].js',
      publicPath: '/',
      chunkFilename: '[id].[chunkhash].js'
   },
   optimization: {
      chunkIds: "named",
      splitChunks: {
         chunks: 'all',
      },
   },
   devServer: {
      historyApiFallback: true
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            use: 'babel-loader',
         },
         {
            test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
            exclude: /node_modules/,
            use: ['file-loader?name=[name].[ext]']
          },
          {
            test: /\.css$/,
            use: [
               MiniCssExtractPlugin.loader,
                'css-loader',
            ],
          },
        ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve( __dirname, 'public/index.html' ),
        filename: 'index.html',
        favicon: 'public/favicon.ico',
      }),
      new MiniCssExtractPlugin({
         filename: '[name].css',
         chunkFilename: '[name]-[id].css',
      }),
      new CopyPlugin({
         patterns: [
           { from: './src/serviceWorker.js', to: './serviceWorker.js' },
           { from: './public/offline.html', to: './offline.html' },
           { from: './public/manifest.json', to: './manifest.json' },
         ],
       }),
   ]
};

我尝试了魔术评论（如下），但它没有预加载css

import (
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  './Article.css'
  );

我尝试了预加载WebpackPlugin，但我只能让它预加载react项目中的所有css文件，或者根本没有

理想情况下，解决方案只包括给定页面所需的内容

---

任何向前推进的想法都将不胜感激。谢谢

为什么不使用

link

tag预加载？为什么不使用预配置的create react应用程序，或者更好的-@PunitMakwana我可以将link标记放在各个react组件的呈现中并实现这一点，但是它似乎“有点黑客”，因为在使用react时，这更适合作为导入。。。最坏的情况，我可以用这个，虽然我更喜欢基于网页包的解决方案。@Kal这是一个现有的应用程序，所以我希望不要重新创建基础。为什么不使用

链接
标记预加载？为什么不使用预配置的create react应用程序，或者更好的方法-@PunitMakwana我可以将链接标记放在各个react组件的呈现中并实现这一点，然而，它似乎“黑客”，因为这将更适合作为一个进口时使用反应。。。最坏的情况下，我可以使用这个，但我更喜欢基于网页包的解决方案。@Kal这是一个现有的应用程序，所以我希望不要重新创建基础。