我已经升级到webpack 4 for Rails。我在Vue.js 2中使用它。我也在配置中使用块。但是自升级以来，我注意到页面加载顺序很奇怪。页面在加载样式和JS之前加载HTML，这不是之前发生的事情。我已经附加了之前和之后的视频链接，以便更好地了解问题。
我一直在这里和任何地方寻找有同样问题的人，但我不能......
这是我的配置文件：
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);
}
#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之外。这在一定程度上解决了弹出式问题，但我仍然认为这是一种错误的方法，只是一种解决方法......
看起来您的webpack3配置会在生成的html顶部注入css，而webpack4会在底部注入css。尝试将= stylesheet_packs_with_chunks_tag 'landing_page'移到顶部。我不确定css到landing_page标签是什么。它可能是不完整的，其余的css是从js异步加载的。检查webpack3和webpack4生成的html代码，并检查生成的css块及其加载顺序列表。
我建议确保样式表正常添加：
= content_for :head
= stylesheet_packs_with_chunks_tag 'landing_page'
然后在应用程序布局（或主要布局）
= yield :head
这将确保样式表在DOM之前加载，并在javascript开始运行时就绪。
虽然我没有完全了解这一点，但我找到了一个临时的简单解决方案，以回到原始的webpack 3行为，JS / CSS阻止加载页面，灵感来自这个question
window.addEventListener('load', () => {
### Initialise Vue app
});
在加载我的Vue之前，它会强制等待窗口加载所有JS / CSS资源。这适用于所有页面，但只有一页，因为除了登录页面之外的所有内容都只是从Vue组件构建的。
对于登陆页面，我已经采用@Berto建议将JS / CSS包加载委托给负责人。所以现在我们也阻止了登陆页面上的执行。结合起来，我看到与以前完全相同的加载行为。