前端开发过程中，图片在页面中扮演着重要的角色，但是常规打包方式下，图片是通过链接方式引入，不利于代码的管理和部署。此时，可以用 rollup-plugin-img 来实现将图片转换为 base64 格式，在代码中直接引用图片资源。
本文将详细介绍如何在项目中安装和使用 rollup-plugin-img 进行图片的转换。
安装
在项目根目录下使用 npm 安装 rollup-plugin-img：
--- ------- ----------------- --
-D 参数使得 rollup-plugin-img 只在开发时使用。
rollup.config.js 配置
在 rollup.config.js 配置中，添加如下代码：
------ --- ---- --------------------
------ ------- -
------ ---------------
------- ------
-------- -
-----
------- ----------- -- -------
----------- -------------------------- -- ----
------ ------ -- --------- -----
-------- ----------------- -- ---------
--
-
-示例代码
babel.config.js
------ ---- ---- -------------------- ----- --- - ------------------------------ ------- - ----- -------------------------------
运行 rollup 打包后，logo 首先会被转换成 base64 格式，然后在代码中直接引用该 base64 资源。这样便可以避免了图片的 url 引用，减少了网络请求，加快了页面的加载速度。
深度学习
rollup-plugin-img 能够细粒度地控制图片的转换方式和转换后的输出结果。下面分别来说明各项配置项的用途：
output
------- ----------
output 表示转换输出的目标文件夹，通常这一项可以不做修改。
extensions
----------- -------------------------
extensions 表示需要进行转换的图片类型，这里使用正则表达式来匹配相应的后缀名。
limit
------ -----
limit 表示文件大小的限制，如果文件大小超出限制，则会使用链接方式引入图片。
exclude
-------- -----------------
exclude 表示不需要进行转换的文件夹，一般是如 node_modules 等需要忽略的文件夹。
指导意义
使用 rollup-plugin-img 进行图片转换能够大大提高页面的加载速度，并且减少了网络请求。但是需要注意的是，过度地使用 base64 格式会增加代码体积，因此应该适度使用。
如果项目中图片数量较多，建议使用雪碧图和 spriteSmith 来进行优化。同时，使用 Webpack 中的 file-loader 和 url-loader 也能够达到相似的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005663881e8991b448e231f