url-loader作用:
如果页面图片较多,发很多 http 请求,会降低页面性能。这个问题可以通过 url-loader 解决。url-loader 会将引入的图片以 base64 编码并打包到文件中,最终只需要引入这个dataURL 就能访问图片了。当然,如果图片较大,编码会消耗性能。因此 url-loader 提供了一个 limit 参数,小于 limit 字节的文件会被转为 base64,大于 limit 的会使用 file-loader 的参数进行命名,并把图片 copy 到指定文件夹内。
由于 url-loader 包含了 file-loader 所以,file-loader 内的 option 在 url-loader 中均能使用。
url-loader 不适用的场景:
一个图片好几次或大量使用时,浏览器本来是有缓存的,结果你直接生成 base64 打包到代码里面,请求速度来讲无疑是不划算的。
url-loader 只处理两种图片引入情况:(注意url-loader的引入必须是相对路径)
- React 组件内部直接引入:
import red_png from "./red.png";
<img src = {red_png} />
- css 背景图引入:(使用url-loader相对路径,不使用的话需要绝对引用)
background-image: url("./images/blue.png");
只有这两种图片引入方式:
- 当图片大小小于 limit 时:base64 打包
= 当图片大小大于 limit 时:file-loader 会起作用,按照参数name: "img/[name].[hash:7].