Webpack 4 没有按顺序加载页面

Question

我已经升级到 webpack 4 for Rails。我将它与 Vue.js 2 一起使用。我还在我的配置中使用了块。但是自从升级以来，我注意到页面加载顺序很奇怪。页面在样式和 JS 加载之前加载 HTML，这不是之前发生的情况。我附上了之前和之后的视频链接，以便更好地理解问题。

我一直在到处寻找有同样问题的人，但我找不到......

With Webpack 3(before)

With Webpack 4(after)

这是我的配置文件：

开发配置

const environment = require('./environment')
const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

environment.plugins.append(
  'BundleAnalyzerPlugin',
  new BundleAnalyzerPlugin()
)


module.exports = environment.toWebpackConfig()

环境（共享）配置

const { environment } = require('@rails/webpacker')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const vue = require('./loaders/vue')

const additionalConfig = {
  plugins: [
    new VueLoaderPlugin(),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendor: {
          name: 'vendor',
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          minChunks: 3,
        },
      }
    }
  },
  module: {
    rules: [{
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    }, {
      test: /\.sass$/,
      use: ['vue-style-loader', 'css-loader', 'sass-loader']
    }]
  },
  output: {
  },
  devtool: 'source-map',
}

environment.config.merge(additionalConfig);

environment.loaders.prepend('vue', vue)

module.exports = environment

视频中页面相关的包

import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';
import 'flexboxgrid/css/flexboxgrid.css';

import Vue from 'vue/dist/vue.esm';
import VueCookies from 'vue-cookies';
import { DateTime } from 'luxon';

// ElementUI Components
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

// Custom Components
import TextSection from '../components/TextSection.vue';
import TopNavigation from '../components/navigation/TheTopNavigation.vue';

import { store } from '../store';

Vue.use(ElementUI, { locale });
Vue.use(VueCookies);

const app = new Vue({
  el: '#app',
  store,
  mounted() {
    var selector = document.querySelector("#app");
    var errors   = selector.dataset.errors;

    if (selector) {
      store.commit('base_states/authenticate',
        JSON.parse(selector.dataset.signedIn)
      );
    }

    if (errors) {
      this.$message({
        dangerouslyUseHTMLString: true,
        message: JSON.parse(errors).join("\n"),
        type: 'error'
      });
    }
  },
  components: { TextSection, TopNavigation },
});

if (!app.$cookies.get('timezone')) {
  app.$cookies.set("timezone", DateTime.local().zoneName);
}

该页面的 Rails 视图

#app{ data: { signed_in: "#{user_signed_in?}", errors: flash[:errors] } }
  .landing-top
    .row.banner
      %top-navigation{ ":user" => user, "logo" => logo }
      .row.start-sm.around-sm.middle-sm.center-xs.landing-hero
        .col-lg-4.col-md-4.col-sm-4.col-xs-12
          %h1= t 'static.banner.headline'
          %p= t 'static.banner.subtitle'
          .actions
            %a.no-decoration{ class: "el-button el-button--success", href: "/events" }
              See upcoming events
        .col-lg-6.col-md-6.col-sm-6.col-xs-12
          = video_tag("https://s3.eu-west-2.amazonaws.com/vras-assets/product_preview_new.webm",
                      poster: preview_poster,
                      class: "preview-video", autoplay: "true",
                      muted: "true",          loop: "true" )
  .landing-body.site-padding
    .row.around-lg.middle-lg.middle-md.features
      .col-md-4.col-xs-12.feature-column
        = inline_svg 'icons/potion.svg', class: 'svg-icon'
        %text-section{ "title" => t('static.first_section.title_one'),
                       "text"  => t('static.first_section.text_one') }
      .col-md-4.col-xs-12.feature-column
        = inline_svg 'icons/map.svg', class: 'svg-icon'
        %text-section{ "title" => t('static.first_section.title_two'),
                       "text"  => t('static.first_section.text_two') }
      .col-md-4.col-xs-12.feature-column
        = inline_svg 'icons/unicorn.svg', class: 'svg-icon'
        %text-section{ "title" => t('static.first_section.title_third'),
                       "text"  => t('static.first_section.text_third') }
  .row.center-lg.center-xs.video-showcase
    .col-lg-10.col-md-10.col-xs-12
      = video_tag('https://s3.eu-west-2.amazonaws.com/vras-assets/preview.mp4',
                  poster: 'meta_cover.jpg',
                  class: 'preview-video',
                  autoplay: 'true',
                  muted: 'true',
                  loop: 'true')
    .col-lg-8.col-md-8.col-xs-10{ style: "padding-top: 20px" }
      %h3
        = image_tag("bigscreen_logo.png", width: "250px")
        %br
        = t('static.third_section.title')
      %text-section{ "text"  => t('static.third_section.text') }
  .landing-body.site-padding
    .row.around-lg.middle-lg.middle-md{ style: "margin-bottom: 100px" }
      .col-lg-6.col-md-6.col-xs-12
        %text-section{ "title" => t('static.second_section.title'),
                       "text"  => t('static.second_section.text') }
      .col-lg-6.col-md-6.col-xs-12.first-xs.last-lg.last-md{ style: "text-align: center" }
        %iframe{:title => "Discord Widget", :allowtransparency => "true", :frameborder => "0", :height => "519", :src => "https://discordapp.com/widget?id=402246704252059648&theme=dark", :width => "320"}
  = render "footer"

= javascript_packs_with_chunks_tag 'landing_page'
= stylesheet_packs_with_chunks_tag 'landing_page'

更新

我的研究让我相信它是这个问题：

发生这种情况是因为您正在捆绑样式加载器，它将您的 CSS 作为字符串放入 Javascript 包中。

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

我找不到改进的方法，所以现在我已经将我需要的 CSS 提取到 Rails app/assets 文件夹中，以便在 webpack 和 Vue 之外加载。这在一定程度上解决了弹出问题，但我仍然觉得这是错误的解决方法，只是一种解决方法......

Answer 1

我建议确保样式表正常工作添加：

= content_for :head
  = stylesheet_packs_with_chunks_tag 'landing_page'

然后在应用布局（或主布局）中

= yield :head

这将确保样式表在 在 DOM 之前加载，并且在 javascript 生效时已准备就绪。

Answer 2

看起来你的 webpack3 配置在生成的 html 的顶部注入 css，而 webpack4 在底部注入。尝试将= stylesheet_packs_with_chunks_tag 'landing_page' 移到顶部。我不确定 landing_page 标签的 css 是什么。它可能不完整，其余的 css 是从 js 异步加载的。检查 webpack3 和 webpack4 生成的 html 代码，并检查生成的 css 块列表及其加载顺序。

Answer 3

虽然我还没有完全深入，但我找到了一个临时简单的解决方案，可以回到最初的 webpack 3 行为，即 JS/CSS 阻止页面加载，受 question 的启发

window.addEventListener('load', () => {
  ### Initialise Vue app
});

在加载我的 Vue.js 之前，它强制等待窗口加载所有 JS/CSS 资产。这适用于所有页面，但只有一个页面，因为除了登录页面之外的所有内容都仅由 Vue 组件构建。

对于登陆页面，我采用了@Berto 的建议，将 JS/CSS 包加载委托给头部，并获得了收益。所以现在我们也阻止了登陆页面上的执行。结合起来，我看到的加载行为与以前完全相同。