[英]Vue development and production builds look differently
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/ 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/ 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/ )这里的问题与webpack
树抖动技术 100% 相关, webpack
技术是删除未使用的东西( 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.你们现在在package.json
使用属性{"sideEffects": false}
,这意味着可以安全地删除任何文件,包括.vue
文件,尽管.vue
文件应该被视为sideEffects
。
The fact is tree-shaking
only applies in case of production
mode, that's why you're safe with development
mode.事实上tree-shaking
仅适用于production
模式,这就是为什么您在development
模式下是安全的。
In short, in order to fix this issue, you guys just simply takes .vue
files as sideEffects
:简而言之,为了解决这个问题,你们只是简单地将.vue
文件作为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.你们还必须检查您的存储库以检查哪些是上面添加到列表中的潜在副作用,或者如果您不确定副作用是什么,甚至停止使用此功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.