dynamic-import | Dynamically load scripts , css , and templates

I got it working in the end. One of the things I did not mention was my Rails version (5.1.6). I upgraded this to 5.2.x so that it is in sync with webpacker 5.4. This brought in some changes to the structure, including new babel and postcss files.

I also installed corejs and regenerator-runtime and now everything is working perfectly.

Lesson learnt, check compatibility before upgrading anything!

First thing is to confirm this is really not prefetching...

1. Build your app and look at the generated index.html - if you see tags with rel="prefetch" and your lazy loading chunks, this is prefetching Vue CLI does automatically. On the link above you can read about how to disable it or fine tune it

2. Check the network tab in Dev Tools and select one of your lazy loaded chunks - look at the Request headers and look for Purpose: prefetch (Firefox uses X-Moz prefetch). If you find this, it means that browser requested the chunk because of prefetch link...

Now you can confirm your feeling that these chunks slow down your app 1st render. Best way is again using Dev Tools - this time the Performance (I'm more used to Chrome ...seems better than Firefox)

Chrome: Just open Dev Tools, switch to Performance tab and use small "reload" icon with "Start profiling and reload page" tooltip. You can stop the profiling after page is loaded.

Here is the screenshot of one of mine apps. This is Vue CLI app with just one lazy route ("admin"). It may seem like DOMContentLoaded event (blue DCL) and First Paint (green FP) strangely correlate with admin98... chunk finished loading so it may seem my app's 1st paint is blocked by my lazy loaded "admin" chunk

But if you look more carefully you will see there is a task running ("Parse HTML" + "Evaluate Script" - selected in the screenshot) - it starts when the last "non prefetch" script is loaded ("chunk-vendors" in this case) and accidentally finishes at the same time "admin" chunk loading is finished. So the browser is parsing other non-lazy loaded JS of my app and at the same time downloading prefetch scripts. It is clear that prefetching lazy loaded chunk do not block or delay my app 1st paint even it may seem so...

This is just an example

Did you followed this tutorial? https://vue-loader.vuejs.org/guide/pre-processors.html#sass

You may try

i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder

I was able to achieve this using HtmlWebpackPlugin which seems pretty supportive in managing the html output. First, I had to remove the html-loader in webpack.config which I wasn't using for a purpose and then the added the following configuration to HtmlWebpackPlugin.

This may be a silly answer. Try checking whether the task is running or any other programs interfereing the app, like an antivirus.

It looks like you have installed the application from the master branch that is unstable and should never be used in production.

Instead, you can install the latest stable long term support version, which is 4.2 LTS. To do this, please follow the official documentation: https://doc.oroinc.com/backend/setup/installation/#install-oro-application

The important step in your case is the first command, that downloads the latest stable version of the application:

To my great surprise, following a suggestion on https://makandracards.com/makandra/432947-how-to-fix-webpack-dev-server-not-found to

Run yarn install --check-files to fix this error,

I restarted the VirtualBox VM using vagrant from a Command prompt executed as Administrator (under Windows), ran the command, and all the issues I was having with webpack and webpack-dev-server are resolved.

I hope that this helps someone.

If you setup a proxy in the config, you (the dev) are expected to run a server where things are being proxied to e.g at http://localhost:3000. Webpack devserver does not create the proxied server for you. The proxy setting is commonly used to proxy api calls e.g