优化构建尺寸vuejs

Question

构建生产版本时，css + js的大小达到3.8MB。

我唯一能看到的是bootstrap，它占用了3.8MB大小的一半。

该应用程序在admin模块中包含CRUD功能，我主要使用bootstrap，而other module是静态页面列表，其中我仅使用了grid引导程序

关于如何在进一步优化方面进行改进的指南？

Answer 1

这是预期的，并且使用bootstrap，您无能为力。相反，如果您使用bootstrap-vue，则可以仅导入所需模块的特定部分（javascript），这将大大减少捆绑包的大小。

话虽如此，这里没有什么错。这些文件的gzip大小最大为252kb，而且非常便宜。

如果您使用http2为站点提供服务，并且浏览器支持它，则您的请求将被多路复用，并将使用TCP管道加载资产。与HTTP1相比，这具有巨大的收获和改进：

• 通过TCP套接字打开与服务器的连接
• 然后，TCP套接字通过使用框架（异步）与http1（同步，并且一次只能管理2个同步HTTPD线程）来平衡请求。
• 管道不等待资产，而是继续级联资产请求，从而极大地改善了页面负载。

因此，总结一下-压缩您的资产，并确保您的Web服务器使用http2，并且此时的问题很小。

Answer 2

考虑使用purgecss插件摆脱所有未使用的引导程序类：https://www.purgecss.com/guides/vue