前言
在前端开发中，SVG 的应用越来越广泛。但是，如果直接引入 SVG 文件，则会生成多个 http 请求，导致页面加载速度明显变慢，而且还需要处理 SVG 文件的细节问题。这时候，svg-inline-loader-vp 就派上用场了。
SVG-Inline-Loader-Vp 是一个 Webpack 插件，能够将 SVG 图像嵌入到 Webpack 打包的 javascript 代码中，从而实现优化性能，同时可以在您的应用代码中使用 SVG 图像，只需要一个简单的引入语句。
本文将详细介绍如何使用 svg-inline-loader-vp 这个 npm 包。
安装
为了使用 svg-inline-loader-vp，首先需要在你的项目中安装 webpack：
npm install webpack --save-dev
接着，需要安装 svg-inline-loader-vp：
npm install svg-inline-loader-vp --save-dev
配置
在 webpack.config.js 中配置 svgInlineLoaderPlugin：
-- -------------------- ---- -------
----- --------------------- - ---------------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ------------------------------
-
-
--
-------- -
-- -- ----- ----
--- -----------------------
-
-使用
使用时，只需在 js 文件中按照如下方式引入 SVG 图片即可：
import mySvg from './img/svg.svg';
其中 img/svg.svg 是对应的 SVG 文件路径。
在样式中使用 SVG，只需使用 background: url('data:image/svg+xml;charset=utf-8,<svg ...>...</svg>'); 这样的语法来引入即可。
示例代码
以下是一个简单示例，设置了使用 webapck 压缩构建，来演示使用 svg-inline-loader-vp 的过程。
安装必要的包：
npm install svg-inline-loader-vp babel-loader @babel/core webpack webpack-cli webpack-dev-server --save-dev
创建一个图片文件 img/spinner.svg：
-- -------------------- ---- -------
---- --------------- ---
---- ----------------------------------
------------ -------------
---------- - --- ----
------------------------------
--------------------
------------------ -------
------- ------- ------- ----- ---------------
-------- ----------------- ------------------- -------------------------- ---------- ---------- -----------------------------------
-------- ------------------ ----------------------- -------------------------- ---------- ---------- -----------------------------------
---------
------- ------- ------- ----- ---------------
-------- ----------------- --------------------- -------------------------- ---------- ---------- -----------------------------------
-------- ------------------ ----------------------- -------------------------- ---------- ---------- -----------------------------------
---------
------- ------------ ------- ------ ---------------
-------- ----------------- ------------------------------ ------------------------------------------ ---------- ---------- -----------------------------------
---------
------- ------------ ------- ------ ---------------
-------- ----------------- ------------------------------ ------------------------------------------ ---------- ------------- -----------------------------------
---------
------- ------- ------- ----- ---------------
-------- ----------------- ------------------- -------------------------- ---------- ------------- -----------------------------------
-------- ------------------ ----------------------- -------------------------- ---------- ------------- -----------------------------------
---------
------创建一个 js 文件 index.js：
import spinner from './img/spinner.svg';
const app = document.getElementById('app');
app.innerHTML = spinner;创建一个 html 文件 index.html：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------ ------ ---------------
-------
------
---- ---------------
------- ------------------------------
-------
-------在根目录下创建一个 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------- - ----------------------------------------
-------------- - -
------ --------------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-- --- ------
-
----- ---------
------- ------------------------------
--
-- ----- ------
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- -
-- --- ------ ------ ------
--- -----------------------
--
---------- -
------------ --------
--
----- ------------
--最后，在命令行执行以下命令：
npx webpack
即可看到构建好的文件在 dist 目录下。
完整代码请见 GitHub。
总结
以上就是 svg-inline-loader-vp 的使用教程，它能够极大地优化前端页面性能，并且用法简单，只需要在 webpack.config.js 中进行简单的配置即可，使得开发者能够更加专注于业务逻辑的开发，而不用过多地关注细节问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067347890c4f72775836f4