CDN自动转WebP不生效，是配置问题还是浏览器兼容问题？
我们网站用的是阿里云CDN，已经开启了“自动将图片转为WebP”功能，但实际测试发现有些图片还是返回的原格式（比如.jpg）。我用Chrome DevTools看请求头，Accept里确实有image/webp，但响应Content-Type还是image/jpeg。
是不是还需要在源站做额外处理？或者CDN的缓存规则影响了？之前试过强制加?format=webp参数能生效，但自动判断好像没起作用。有没有人遇到过类似情况？
- 2
回答
62浏览
为什么设置了webpack externals后jQuery还是被重复打包？
我在项目里用CDN引入了jQuery，然后在webpack配置里设置了externals想排除它，但打包后发现vendor文件里还是包含了jQuery代码，页面控制台还报错"jQuery is def...
- 2
回答
46浏览
External外部化后CDN资源加载失败怎么办？
我在用Webpack做打包优化，把React和ReactDOM配置成external了，想用CDN加载。本地开发没问题，但部署到测试环境后页面直接白屏，控制台报错说React is not defin...
- 1
回答
43浏览
Webpack 的 Tree Shaking 为什么没生效？
我用 Webpack 5 打了个包，明明写了按需导入的代码，但打包后发现没被摇掉，体积还是很大。是不是配置有问题？ 我试过把 mode 设成 production，也确认用了 ES6 模块语法，比如 ...
- 2
回答
71浏览
Webpack的splitChunks配置为什么没生效？大文件还是被打包在一起
在配置Webpack optimization.splitChunks时，我把minSize设置成30000，但发现第三方库还是被打包到vendor chunk里了，难道我的配置有问题？ 之前尝试过这...
- 2
回答
43浏览
Webpack devServer 配置 proxy 为啥不生效？
我在本地开发时用 Webpack 的 devServer 配置了 proxy，想把 /api 开头的请求代理到后端接口，但发请求还是直接打到了前端端口，根本没走代理。 我试过改 target 地址、加...
- 2
回答
47浏览
WebP图片用source标签不生效是怎么回事？
我在项目里想用WebP格式优化图片加载，按文档写了picture和source标签，但浏览器还是加载了jpg，根本没用WebP，是不是写法有问题？ 我试过把WebP放第一个source，也检查了文件路...
- 1
回答
73浏览
如何在 Vue 项目中自动将图片转为 WebP 并优雅降级？
我最近在做性能优化，想把项目里的 JPG/PNG 自动转成 WebP，但又怕老浏览器不支持。试了下用 webpack 插件生成 WebP，但不知道怎么在 Vue 模板里自动切换格式，现在只能手动写两套...
- 1
回答
75浏览
Webpack 中 resolve.alias 配置后为啥还是找不到模块？
我用 Webpack 搭了个项目，想通过 resolve.alias 简化 import 路径，但配置完之后一直报错说找不到模块，明明路径是对的啊？ 比如我把 @ 指向 src 目录，然后在组件里写 ...
- 2
回答
60浏览
Webpack配置中如何正确处理Vue单文件组件的样式作用域问题？
我最近在用 Webpack 手动搭建 Vue 项目，发现 scoped 样式没生效，全局污染了其他组件。我确认 vue-loader 已经装了，也按文档配了 rule，但还是不行。是不是 loader...
- 2
回答
74浏览
Webpack配置了HMR但修改代码后页面还是整页刷新，怎么回事？
我用Webpack搭了个开发环境，明明启用了Hot Module Replacement，但每次改JS文件页面还是会整页刷新，根本没热更新。查了文档也加了module.hot.accept，但好像没生...
你强制加参数能生效，说明CDN的WebP转换功能本身是正常的。问题在于：之前那些请求已经以JPEG格式被CDN节点缓存起来了，而且源站没有返回合适的Vary头，导致CDN觉得所有浏览器都应该返回缓存的JPEG。
解决办法很简单，先把CDN缓存清理掉。在阿里云CDN控制台找到“刷新缓存”，把图片目录或整个域名都刷新一遍。刷新完再测试，基本就好了。
如果刷新完还不行，那基本就是Vary头的问题。源站需要在响应头里加上
Vary: Accept，这样CDN才会根据浏览器的Accept头返回不同格式。Nginx的话在对应配置里加：
Apache的话用：
加上这个头之后，CDN就会区分不同浏览器的请求，分别缓存不同格式的版本了。
还有一个可能的坑：阿里云CDN的WebP转换只对特定格式生效，比如只支持PNG、JPEG转WebP，如果源站已经是WebP或者GIF转WebP可能会有些限制，不过你这个情况应该不是这个原因。
你先试试清理缓存，十有八九能解决。
?format=webp参数能转成功，说明CDN的WebP转换引擎本身是正常的，配置也没大问题。原因很简单：你在后台开启“自动转WebP”这个功能之前，这些图片的URL已经被CDN边缘节点缓存成了JPG格式。CDN为了追求极致的回源效率，不会因为你改了个配置就自动去刷新所有节点上已有的缓存文件。当请求带着
Accept: image/webp头过来时，CDN一看缓存里有现成的JPG，就直接扔给浏览器了，根本没走转换逻辑。解决办法很直接，去阿里云CDN控制台，针对这几个不生效的图片URL执行一下“URL刷新”。刷新之后，CDN边缘节点的缓存会被强制清除，新的请求触发回源，这时候才会应用你的WebP转换规则，把WebP版本缓存下来。
以后遇到这种配置变更，记得顺手刷一下缓存，不然排查起来最浪费时间。另外，建议检查一下你的CDN缓存过期时间设置，别设得太死板，适当缩短图片缓存时间能让配置变更生效得更快，整体维护效率更高。