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
It seems that some styles are missing:
How to fix it? Thank you
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.