• 欢迎光临~

前端开发经验:不要动构建后的文件

开发技术 开发技术 2022-12-28 次浏览

不要动构建后的文件

神奇的问题往往开始于一个低级的错误

今天遇到了一个问题,使用 vue-cli 打包异常,无法生成资源文件,多番努力下,总算解决了一个本就不存在的问题。

新需求,修改默认头像图片,小问题,开发环境都不用,于是直接替换了构建后的文件 dist/assets/images/user.abi3a3x.png,预览OK

下一步直接修改源码,替换原始文件 src/assets/images/user.png,替换后编译,发现没有生成 dist/assets/images/user.[hash].png文件,于是查找原因,各种修改引入路径,检查图片格式,花费了不少时间

最后查了资料,小于 4kb 图片,会直接打包进 js,也就是说,问题不存在,但确实又花了时间。

表面原因分析:vue-cli 基于 webpack 中默认小于4k的图片不会输出文件,而是直接编译为内联js代码,原始图片 80k,更新后图片只有 1k,所以才会出现上述现象

深层原因分析:其实仔细想下,编译生成那些文件根本就不需要关心,但由于先改了编译后文件,潜意识下认为,只有生成了新的图片文件才算是打包成功,于是就自认为出了的bug:打包出问题了,根本原因就是修改了编译后文件,如果一开始就不要动dist目录,也就不会有后面的一系列问题。

程序员灯塔
转载请注明原文链接:前端开发经验:不要动构建后的文件
喜欢 (0)