Javascript 第4页没有'；不要按顺序加载页面

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

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

以下是我的配置文件：

开发配置 环境（共享）配置 与视频中的页面相关的包 该页面的Rails视图 更新 我的研究使我相信这是一个问题：

这是因为您正在绑定样式加载器，它将CSS作为字符串放入Javascript包中

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

---

我找不到改进的方法，所以现在我已经将我需要的CSS提取到Rails

app/assets

文件夹中，以便在webpack和Vue之外加载。这在一定程度上解决了弹出窗口的问题，但我仍然觉得这是一种错误的方式，只是一种解决方法…

看起来您的配置使用webpack3在生成的html顶部注入css，而webpack4在底部注入css。尝试将

=带有块的样式表\u packs\u标记“landing\u page”

移动到顶部。我不确定什么css会进入

登录页面

标签。它可能不完整，css的其余部分是从js异步加载的。检查由webpack3和webpack4生成的html代码，并检查生成的css块列表及其加载顺序。

关于确保样式表正常工作的问题，我建议添加：

= content_for :head
  = stylesheet_packs_with_chunks_tag 'landing_page'

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

---

这将确保样式表在DOM之前加载，并在javascript开始运行时准备就绪。

虽然我还没有完全弄清楚这一点，但我找到了一个临时的简单解决方案，可以回到最初的webpack 3行为，即JS/CSS阻止页面加载，灵感来自于此

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

---

对于登录页，我采用了@Berto建议，将JS/CSS包的加载委托给头部，并进行了让步。所以现在我们也在阻止登录页上的执行。总之，我看到的加载行为与以前完全相同。

我认为它确实是异步加载的。我已经试着把样式表放得更高了，但根本没用。作为一种解决方法，我将关键的CSS提取到rails样式表中，这样它就可以在webpack和Vue之外加载。但它仍然感觉不应该是这样，如果我决定将所有CSS打包，会发生什么呢？检查这张便条我确实看到了它，并尝试将

提取\u CSS

更改为

真的

，但还没有真正深入研究具体的事情。我再看看不幸的是，这无助于解决问题。不管我把样式表放在头上与否，它们似乎仍然无法正常加载。我甚至会在最后说，从我所看到的

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);
}

#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'

= content_for :head
  = stylesheet_packs_with_chunks_tag 'landing_page'

= yield :head

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