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 configuration

似乎有些风格缺失了：

​

​

怎么修呢？谢谢

Answer 1

这里的问题是100%与webpack树抖动技术有关，即删除未使用的东西(https://webpack.js.org/guides/tree-shaking/)。

现在，您可以在package.json中配置属性{"sideEffects": false}，这意味着可以安全地删除任何文件，包括本应被视为sideEffects的.vue文件。

事实上，tree-shaking只适用于production模式，这就是为什么使用development模式是安全的。

简而言之，为了解决这个问题，你们只需将.vue文件作为sideEffects

package.json

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

你们还必须审查你的回购，以检查哪些是潜在的副作用，添加到上面，甚至停止使用这个功能，如果你不确定什么是副作用。