Question

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

这是我的演示：https://harp29.github.io/cb-pc/

如何通过Webpack运行JavaScript文件之前，如何加载styles / 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

Answer 1

最简单的解决方法是在帕格模板中包含一小段CSS，以隐藏<body>。然后在动画开始之前添加一行JS以取消隐藏<body>。

编辑：如果要与JS捆绑包分开加载CSS文件，请使用https://github.com/webpack-contrib/mini-css-extract-plugin。在模板中，在生成的CSS文件的公共路径中添加一个<link>标记。

之所以发生这种情况，是因为您与样式加载器捆绑在一起，这会将CSS作为字符串放入Javascript捆绑包中。

因此，当浏览器解析JS包时（非常慢），HTML将呈现（非常快）。在该捆绑包的末尾，浏览器将找到包含您的CSS字符串的模块。然后它将对其进行解析，并使用Javascript来应用样式。

Answer 2

听起来像critical CSS或“首屈一指”的CSS。

由于您已经在使用pug，因此应该查看HtmlWebpackPlugin的文档。他们有一个如何内嵌您使用的<style>的示例，可以在这里找到：inline example。

基本思想是模板可以访问htmlWebpackPlugin.files，该模板具有css属性，您可以迭代该属性并将其作为<style>附加在<script>之前，以阻止进行解析，直到应用样式为止。

请确保您使此关键CSS保持精简。它会“阻塞”，但是只要您不内联大量CSS，就不会被察觉。

在javascript之前加载样式-webpack 4

2 个答案: