Vue 開發和生產構建看起來不同

Question

我將我的應用程序部署到服務器，我意識到它看起來與以前不同。 不同之處在於它的編譯方式。 源代碼和配置是一樣的。

暫存/生產構建

這是不正確的：

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

開發構建

這是對的：

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

有

• 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帶塊配置

似乎缺少一些樣式：

如何解決？ 謝謝

Answer 1

這里的問題與webpack樹抖動技術 100% 相關， webpack技術是刪除未使用的東西（ https://webpack.js.org/guides/tree-shaking/ ）

你們現在在package.json使用屬性{"sideEffects": false} ，這意味着可以安全地刪除任何文件，包括.vue文件，盡管.vue文件應該被視為sideEffects 。

事實上tree-shaking僅適用於production模式，這就是為什么您在development模式下是安全的。

簡而言之，為了解決這個問題，你們只是簡單地將.vue文件作為sideEffects ：

package.json

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

你們還必須檢查您的存儲庫以檢查哪些是上面添加到列表中的潛在副作用，或者如果您不確定副作用是什么，甚至停止使用此功能。