WebPack和Vue如何将页面大小提高1,500％

本文以幽默的口吻讲述了作者如何使用Webpack和Vue大幅增加CSS文件大小的故事，并最终通过改进方法解决了这个问题。文章并非鼓励增加页面大小，而是以反讽的方式展现了在使用Bulma框架和Vue CLI过程中遇到的问题及解决方法。

免责声明: 本文带有讽刺意味。作者并非认为自己比读者高明，也不认为增加网页大小是好事。

许多文章都教你如何减小页面大小：优化图片、移除冗余CSS规则等等。作者以沃尔玛为例，指出其页面大小的缩减。

JavaScript优化建议：

?️ 删除旧的和重复的依赖 ? 将大型依赖替换为小型依赖 ? 检查是否过度polyfill ? 清理A/B测试配置 ✂️ 代码分割！

沃尔玛在其网站上进行了此操作。JS包缩小了69%。交互时间缩短了28%。

然而，鲜有文章教你如何增加页面大小。作者尝试寻找相关资料，却只找到一篇关于增大字体大小的文章。

意外的“增重”

为什么要增加页面大小呢？这对于低带宽用户来说不是一件好事吗？作者给出了一些看似合理的，实则略显滑稽的理由：

1. 你拥有千兆带宽，而且住在田纳西州（暗示网络条件优越）。
2. 浏览器会缓存，你只需要下载一次网站。
3. 你不在乎是否有人访问你的网站，因为你“工作是为了生活，而不是为了工作而生活”。

如果你认同这些理由，作者将展示如何将CSS大小增加1500%——只需一个简单的Webpack技巧。

奇妙的技巧

作者在将项目重构到Bulma CSS框架时发现了这个问题。最初的代码混乱不堪，Sass代码如同“囤积者”节目中的场景。

Bulma包含模态框等功能，作者之前使用的是第三方Vue组件。它还有一个汉堡菜单，因为这是众所周知的成功网站必备元素。

重构完成后，作者发现CSS大小显著增加。最初的手工编写代码只有30KB（gzip压缩后），重构后达到了260KB。Vue CLI也对此发出了警告，但作者忽略了。

作者将项目部署到生产环境，并在Twitter上宣布了这一“成就”。Bulma的创建者Jeremy Thomas对此做出了回应，指出CSS大小增加是因为存在大量重复样式。

问题所在

作者承认自己对CSS和Sass了解不多。在使用Vue CLI项目时，作者创建了一个src/styles文件夹，并在其中放置了一个bulma-but-not-all-of-bulma-only-some-of-it.scss文件，该文件导入部分Bulma组件。然后，将该文件导入到自定义Sass文件site.scss中。

为了在每个组件中使用这些样式，作者使用了Sarah Drasner的一篇博客文章中的方法，通过修改vue.config.js文件来修改Webpack构建过程。

作者没有理解的是，这种方法会将Sass导入到每个Vue组件中。这导致了大量重复样式，因为Vue会为每个组件添加data-v-属性。

Vue如何处理scoped

Vue允许将样式作用域限制在组件内，通过动态插入data-属性实现。如果在组件中导入包含样式的Sass文件，Vue（通过Webpack）会将这些样式与动态data-属性一起命名空间化。

变量共享问题

你无法在一个组件中定义Sass变量，并在另一个组件中引用它。

使用Bulma和Vue的最佳实践

为了解决这个问题，作者建议使用三个文件：variables.scss（导入Bulma变量）、bulma-custom.scss（导入Bulma组件）和site.scss（定义全局样式）。将site.scss导入到main.js文件中，并将variables.scss添加到vue.config.js文件中。

这样，Bulma就全局可用，并且可以在每个组件中访问所有Bulma变量。CSS大小最终显著减小。

改进后的方案

作者还提交了一个PR到Bulma文档，介绍了如何在Vue CLI项目中自定义Bulma。

以上是WebPack和Vue如何将页面大小提高1,500％的详细内容。更多信息请关注PHP中文网其他相关文章！