Recently, I made the switch to webpack 4 for my Rails project where Vue.js 2 is utilized. In addition, I have configured chunks in my setup. However, after the upgrade, I noticed that the page loading sequence seems off. The HTML contents load before styles and JavaScript, unlike the previous behavior. To better understand the issue, I have provided links to videos showcasing the before and after scenarios.
I've scoured various platforms but have been unable to find anyone facing a similar issue...
Below are snippets of my configuration files:
Development Configuration
const environment = require('./environment')
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
environment.plugins.append(
'BundleAnalyzerPlugin',
new BundleAnalyzerPlugin()
)
module.exports = environment.toWebpackConfig()
Environment (Shared) Configuration
const { environment } = require('@rails/webpacker')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const vue = require('./loaders/vue')
// Additional configurations...
Pack Related to the Page in the Video
// Code related to packs...
Rails View for That Page
#app{ data: { signed_in: "#{user_signed_in?}", errors: flash[:errors] } }
// Rails view content...
Update
Through my research, it seems like the issue lies within:
This is happening because you're bundling with style-loader, which puts your CSS as a string inside your Javascript bundle.
As a result, the HTML renders quickly while the browser parses your JS bundle slowly. Eventually, towards the end of the bundle, the browser encounters the module containing your CSS string, parsing it and applying the styles via Javascript.
Currently, I haven't found an effective solution, so temporarily, I've moved the required CSS files into the Rails app/assets folder to load them separately from webpack and Vue. Although this has somewhat resolved the popping-in issues, I still believe it's more of a workaround rather than a proper fix...