npm 包 rollup-plugin-img 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前端开发过程中，图片在页面中扮演着重要的角色，但是常规打包方式下，图片是通过链接方式引入，不利于代码的管理和部署。此时，可以用 rollup-plugin-img 来实现将图片转换为 base64 格式，在代码中直接引用图片资源。

本文将详细介绍如何在项目中安装和使用 rollup-plugin-img 进行图片的转换。

安装

在项目根目录下使用 npm 安装 rollup-plugin-img：

npm install rollup-plugin-img -D

-D 参数使得 rollup-plugin-img 只在开发时使用。

rollup.config.js 配置

在 rollup.config.js 配置中，添加如下代码：

-- -------------------- ---- -------
------ --- ---- --------------------

------ ------- -
  ------ ---------------
  ------- ------
  -------- -
    -----
      ------- ----------- -- -------
      ----------- -------------------------- -- ----
      ------ ------ -- --------- -----
      -------- ----------------- -- ---------
    --
  -
-

示例代码

babel.config.js

import logo from './assets/logo.png';

const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);

运行 rollup 打包后，logo 首先会被转换成 base64 格式，然后在代码中直接引用该 base64 资源。这样便可以避免了图片的 url 引用，减少了网络请求，加快了页面的加载速度。

深度学习

rollup-plugin-img 能够细粒度地控制图片的转换方式和转换后的输出结果。下面分别来说明各项配置项的用途：

output

output: 'dist/img'

output 表示转换输出的目标文件夹，通常这一项可以不做修改。

extensions

extensions: /\.(png|jpe?g|gif|svg)$/i

extensions 表示需要进行转换的图片类型，这里使用正则表达式来匹配相应的后缀名。

limit

limit: 10000

limit 表示文件大小的限制，如果文件大小超出限制，则会使用链接方式引入图片。

exclude

exclude: 'node_modules/**'

exclude 表示不需要进行转换的文件夹，一般是如 node_modules 等需要忽略的文件夹。

指导意义

使用 rollup-plugin-img 进行图片转换能够大大提高页面的加载速度，并且减少了网络请求。但是需要注意的是，过度地使用 base64 格式会增加代码体积，因此应该适度使用。

如果项目中图片数量较多，建议使用雪碧图和 spriteSmith 来进行优化。同时，使用 Webpack 中的 file-loader 和 url-loader 也能够达到相似的效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005663881e8991b448e231f