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"
  ],
}

你们还必须检查您的存储库以检查哪些是上面添加到列表中的潜在副作用，或者如果您不确定副作用是什么，甚至停止使用此功能。