Vue development and production builds look differently

Question

I deployed my app to server and I realized it looks differently than before. The difference is in a way how it is compiled. The source code and configuration is the same.

Staging / production build

This is incorrect:

https://alfa.mezinamiridici.cz/

> vue-cli-service build --mode staging
-  Building for staging...
WARNING  Compiled with 2 warnings                                                                                                                                                                                                                  
warning 
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance.
Assets:
js/app.50688000.js (1.32 MiB)
js/content-chunk.2f6c3afb.js (457 KiB)
images/opravit.jpg (580 KiB)

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (1.32 MiB)
  js/app.50688000.js
File                                Size                Gzipped
dist\js\app.50688000.js             1348.69 KiB        374.68 KiB
dist\js\content-chunk.2f6c3afb.js   456.97 KiB    134.96 KiB
dist\js\user-chunk.b63740d1.js      126.05 KiB    24.50 KiB
dist\js\admin-chunk.3b1a4900.js     109.80 KiB    27.37 KiB
dist\precache-manifest.4a0f46273bd546044576dff695d5e166.js    10.04 KiB  3.22 KiB
dist\service-worker.js              0.95 KiB      0.54 KiB

Development build

This is correct:

https://beta.mezinamiridici.cz/

> vue-cli-service build --mode development
/  Building for development...
DONE  Compiled successfully in 15571ms                                                                                                                                                                                                            
File                        Size       Gzipped
dist\js\app.js              5993.07 KiB      1028.17 KiB
dist\js\content-chunk.js    1528.93 KiB      270.62 KiB
dist\js\user-chunk.js       492.50 KiB       43.81 KiB
dist\js\admin-chunk.js      167.63 KiB       11.08 KiB

There is

• https://github.com/literakl/mezinamiridici/blob/master/spa/package.json
• https://github.com/literakl/mezinamiridici/blob/master/spa/vue.config.js
• https://github.com/literakl/mezinamiridici/blob/master/spa/src/router.js with chunk configuration

It seems that some styles are missing:

How to fix it? Thank you

Answer 1

The issue here is 100% related to webpack tree shaking technique which is remove unused things (https://webpack.js.org/guides/tree-shaking/)

You guys now configure in your package.json with property {"sideEffects": false} which means it's safe to remove on any files including .vue files which are supposed to be consider as sideEffects though.

The fact is tree-shaking only applies in case of production mode, that's why you're safe with development mode.

In short, in order to fix this issue, you guys just simply takes .vue files as sideEffects:

package.json

{
  "sideEffects": [
    "*.vue"
  ],
}

You guys also have to review your repo to check which things are potential side effects the add to list above or even stop using this feature if you're unsure what the side effects are.