- 博客(4)
- 收藏
- 关注
RSS订阅原创 Rspack 实战，构建流程升级：自动版本管理 + 命令行美化 + dist 压缩，一键输出生产包
本文介绍如何基于Rspack打造自动化构建流程，解决前端项目构建中手动更新版本号、查看耗时、压缩dist包等低效问题。通过改造build脚本实现：1）按"主版本.日期.每日构建次数"自动更新版本号；2）美化命令行日志，区分不同环节；3）自动压缩dist为ZIP包并排除无用文件；4）生成详细构建报告，显示各环节耗时。最终只需执行npm run build即可完成全流程，输出带版本信息的压缩包，并清晰展示构建性能数据。该方案显著提升构建效率，减少人为错误，为前端工程化提供实用参考。
2025-09-12 14:47:08
466
原创 Rspack 实战：用 image-minimizer-webpack-plugin 做图片压缩，优化打包体积
本文介绍了如何在Rspack项目中集成image-minimizer-webpack-plugin实现图片压缩。Rspack作为兼容webpack生态的高性能打包工具，可以直接复用webpack插件。通过配置sharp和svgo压缩工具，可针对不同图片格式设置优化参数，兼顾构建速度和图片质量。文章详细说明了安装依赖、配置Rspack的关键步骤，包括环境判断、压缩参数调优等注意事项。最后建议通过体积对比和清晰度检查来验证压缩效果，可根据实际需求调整quality值取得平衡。
2025-09-12 14:32:07
1984
原创 Rspack 性能优化实战：JS/CSS 压缩 + 代码分割，让产物体积直降 40%
在前端项目上线前，「构建优化」是绕不开的环节 —— 既要保证代码压缩到最小体积（提升加载速度），又要通过代码分割减少重复代码（降低缓存失效成本）。
2025-09-12 11:37:20
1826
原创 Rspack 实战：用 SWC Loader 搞定 JS 兼容（支持 IE 11 + 现代浏览器，兼顾构建速度）
先通过// 1. 环境判断：开发环境为 true，生产环境为 false// 工具函数：统一路径解析（项目根目录下的 src/test 等）// 2. 定义 SWC Loader 配置（根据环境差异化）?{} // 开发环境：空配置（不做兼容处理，提速）: { // 生产环境：配置兼容逻辑env: {// polyfill 引入策略：usage（按需引入，避免全量引入 core-js 导致体积过大）// 指定 core-js 版本（需确保项目依赖的 core-js 版本与此一致）
2025-09-11 16:54:08
1945
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人