目前我们都是统一使用的原图，原图可能有 1024 * 1024，但实际展示可能很小，这样不可避免造成了一些流量的浪费，这么大的流量，也导致我们的页面加载不够快，尤其一些长列表的时候，因为图片尺寸的压缩，让我们的页面有一些卡顿。

于是这两天抽空对项目做了一次构建优化，线上(多国家)构建时间, 从 10分钟 优化到 4分钟, 本地单次构建时间， 从 300秒 优化到 90秒， 效果还不错。

背景我最近将一些 Vue2 项目从 vue-cli(webpack)迁移到了 vite。在第三次这样做之后，我对迁移过程做了一些详细的记录，并将在这篇文章中进行总结。文章目录：package.jsonindex.htmlvite.config.js测试用例Lint发布可视化 Bundle一些指标结论正文package.jsondevDependencies删除 @vue/cli-service 依赖项，并替换为 vi...

背景本文接上篇： 上文中， 我们了解了 chunks 三个字段的含义， 以及每个字段对应的行为。今天是实践篇。修改短短几行配置， 就达到了数百毫秒的优化效果。正文我的这个项目， 迭代一年多了， 中间打包配置也没没怎么改过， 毕竟也没什么问题， 速度也还可以。刚好最近老板要搞指标， 让每个项目组分析性能数据， 给优...

现在比较多的项目用的都是webpack4, webpack 4 舍弃了之前的 commonChunkPlugin，增加了 SplitChunksPlugin。

前言一切要都要从打包构建说起。当下我们很多项目都是基于 webpack 构建的， 主要用于：本地开发打包上线首先，webpack 是一个伟大的工具。经过不断的完善，webpack 以及周边的各种轮子已经能很好的满足我们的日常开发需求。我们都知道，webpack 具备将各类资源打包整合在一起，形成 bundle 的能力。 可是，当资源越来越...