-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Weird loading order after upgrading to Webpack 4 #2016
Comments
My research led me to believe its this issue:
Following this, I came up with two solutions:
window.addEventListener('load', () => {
### Initialise Vue app
}); It forces to wait till window loads all the JS/CSS assets, before loading my Vue. This worked on all, but one page, as everything except landing page is built from Vue components only. For landing page, I've adopted another suggestion, to delegate JS/CSS pack load to the head, with a Hope this helps some of you here. The final solution I want to eventually do is to adopt a skeleton pattern, where I have only outline of my components to show and then they would fill out as the page loads. |
From the v4 upgrade guide, did you have
Putting the extracted styles in the You can also break things up with dynamic import so that things load faster due to http/2. |
I was stuck with the same problem in my react app and used the following plugin to extract the CSS (as webpack 4 requires it). Apparently, this is a required step to add in your webpack config, which I had missed earlier. |
@infantopratik, Webpacker should be automatically adding this plugin for you: webpacker/package/environments/base.js Lines 36 to 42 in 54c3ca9
|
@jakeNiemiec I was aware of this and kept it as That's the reason why production never looked as bad as on development, but it still had a bit of ordering issue, which I fixed by adding that extra I also do use chunks for more efficient caching. @infantopratik as jake said, Webpack provides this by default and I didn't need to it manually myself. I also at some point thought I needed it, but looking into webpacker source, I saw that it gets added |
Is this still an issue? |
I've upgraded to webpack 4 for Rails. I use it with Vue.js 2. I also use chunks in my configuration. But since upgrading, I've noticed that the page load order is weird. The page loads HTML before styles and JS has been loaded, which is not what happened before. I've attached links to the videos for before and after to understand the issue better.
I've been looking in here and everywhere to find anyone with the same issue, but I couldn't...
With Webpack 3(before)
With Webpack 4(after)
As you can see, it starts of with just HTML, no css applied at all and then loads it bit by bit. ElementUI styles are applied at the very end, as can be seen from the Sign in button becoming styles...
Here are my configuration files:
Dev Config
Env (shared) Config
Pack related to the page in the video
Rails view for that page
The text was updated successfully, but these errors were encountered: