javascript - 在javascript之前加载样式

问题描述

我的 JavaScript 在我的样式之前加载，这导致了跳跃和奇怪的加载。

如何在 JavaScript 文件通过 webpack 运行之前加载样式/css 文件？我尝试setTimeout了函数并且它有效，但这是一个临时解决方案，这是解决这个问题的最佳方法吗？

我的 webpack 文件：webpack.dev.js

const path = require("path")
const webpack = require("webpack")
const HTMLWebpackPlugin = require("html-webpack-plugin")
// const cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];

module.exports = {
  entry: {
    main: [
      "webpack-hot-middleware/client?reload=true",
      "./src/script/main.js"
    ]
  },
  mode: "development",
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/"
  },
  devServer: {
    contentBase: "dist",
    overlay: true,
    stats: {
      colors: true
    }
  },
  devtool: "source-map",
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader"
        }]
      },
      {
        test: /\.css$/,
        use: [{
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
      },
      {
        test: /\.(jpeg|jpg|png|svg)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "images/[name].[ext]"
          }
        }]
      },
      {
        test: /\.html$/,
        use: [{
          loader: "html-loader"
        }]
      },
      {
        test: /\.pug$/,
        use: [{
          loader: "pug-loader"
        }]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/pug/index.pug",
      title: "Cervini Bhatia PC",
      inject: true
    })
  ]
}

我的 main.js 文件：

const scss = require('../scss/style.scss');
import index from '../pug/index.pug';
import favicon from '../images/favicon.png';
import logoSymbol from '../images/logo-symbol.svg';
import IntroAnimations from './module/IntroAnimations';

//Instaniate
new IntroAnimations()
.animateTimelines();

我的 index.pug 文件：

doctype html
html
  head.
    <meta charset="UTF-8">
    <title>Welcome - Cervini Bhatia PC</title>   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
  body   
    include ./modules/_loading.pug
    include ./modules/_landing.pug
    include ./modules/_team-section.pug
    include ./modules/_experience.pug
    include ./modules/_firm.pug
    include ./modules/_communication.pug
    include ./layout/_footer.pug

标签： javascriptwebpack

Easiest fix would be to include a small bit of CSS in your pug template that hides the <body>. And then include a line of JS to unhide the <body> before your animations start.

EDIT: if you would like to load your CSS file separately from your JS bundle, use the https://github.com/webpack-contrib/mini-css-extract-plugin. In your template, include a <link> tag to the public path of your generated CSS file.

This is happening because you're bundling with style-loader, which puts your CSS as a string inside your Javascript bundle.

So the HTML will render (very fast) while the browser is parsing your JS bundle (very slow). Towards the end of that bundle, the browser will find the module containing your CSS string. Then it'll parse that and apply the styles with Javascript.

javascript - 在javascript之前加载样式 - webpack 4

问题描述

解决方案

推荐阅读