防止FOUC对代码拆分做出反应可加载的插件

问题描述

我的问题与Wait for CSS to load before JS in React [FOUC]

相同

但是这些解决方案对我没有帮助。

我不知道如何将CSS文件预先插入index.html。

我尝试了此插件的插入选项-https://webpack.js.org/plugins/mini-css-extract-plugin/

在index.html文件中添加了链接：<link href="/static/css/main.css" rel="stylesheet" id="main-styles" />

更改了我的webpack，请注意MiniCssExtractPlugin：

const path = require('path');
const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src',output: {
    path: path.resolve(__dirname,'build/dist'),filename: '[name].[hash].js'
  },resolve: {
    extensions: [".ts",".tsx",".js",".jsx"],plugins: [new TsconfigPathsPlugin({})],},optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',test: /\.(sa|sc|c)ss$/,chunks: 'all',enforce: true,module: {
    rules: [
      {
        test: /\.tsx?$/,loader: 'ts-loader'
      },{
        test: /\.ts$/,enforce: 'pre',use: [
            {
                loader: 'tslint-loader',options: { 
                  tsConfigFile: './tsconfig.json',}
            }
        ]
    },{
        test: /\.scss$/,use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',use: [{
              loader: 'css-loader',options: {
                // If you are having trouble with urls not resolving add this setting.
                // See https://github.com/webpack-contrib/css-loader#url
                url: false,minimize: true,sourceMap: true
              }
            },{
              loader: 'sass-loader',options: {
                sourceMap: true
              }
            }],})
      },{
        test: /\.(sa|sc|c)ss$/,use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,'css-loader','sass-loader',],{
        test: /\.(gif|png|jpe?g|svg)$/i,use: [
          'file-loader',{
            loader: 'image-webpack-loader',options: {
              bypassOnDebug: true,disable: true,{
        test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,loader: 'file-loader?name=assets/fonts/[name].[ext]',}
    ],plugins: [
    new CleanWebpackPlugin(),new RetryChunkLoadPlugin({
      cacheBust: `function() {
        return Date.now();
      }`,maxRetries: 5,chunks: ['chunkName'],lastResortScript: "window.location.href='/500.html';"
    }),new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname,'./src'),transformPath(targetPath,absolutePath) {
            return './src';
          },}
      ],}),new ExtractTextPlugin(
      { filename: 'index.css',disable: false,allChunks: true }
    ),new HtmlWebpackPlugin({
      template: './public/index.html',minify: {
        collapseWhitespace: true,removeComments: true,removeRedundantAttributes: true,useShortDoctype: true,inject: 'body'
      }
    }),new MiniCssExtractPlugin({
      filename: '[name].css',insert: function (linkTag) {
        const reference = document.querySelector('#main-styles');
        if (reference) {
          reference.parentNode.insertBefore(linkTag,reference);
        }
      },})
  ]
};

但是在这种情况下，它会为我生成2个文件

• 1-具有id =“ main-styles”的空文件（无用）（我添加的文件，我希望webpack在其中插入所有CSS代码-main.css）
• 2-必需-但稍后生成，而不是在（main.f1856b9f.css）之前生成

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）