在前端开发中，使用 SVG 可以带来更好的用户体验和更高的可扩展性。而在实际开发中，我们常常需要在项目中多次利用大量的 SVG 图标，这样会导致浏览器加载过多的请求，影响页面性能。为了解决这个问题，我们可以使用 webpack-external-svg-sprite 这个 npm 包来将多个 SVG 图标打包成一个 SVG Sprite，从而避免了过多的请求，提高了页面性能。
安装
在使用 webpack-external-svg-sprite 之前，我们需要安装它。
--- ------- --------------------------- ----------
配置
接下来，我们需要配置 webpack.config.js。
首先，在 plugins 中添加 svg-sprite-loader 插件，并配置其 options 选项，这里我们设置 extract:true 和 spriteFilename: 'sprite.[hash:8].svg'，分别表示将 SVG Sprite 提取到单独的文件中和生成的文件名。
----- ------------------ - ------------------------------------
-------------- - -
-- -------
-------- -
--- --------------------
------------ -----
------------ -
--- --------------
------ ------------------------- ----------- --------------- --------
--
-------------
--------------- ----------------------
---
--
------- -
------ -
-
----- ---------
---- --------------------- ---------------
-------- ---------------
--
--
--
--其次，在 externals 中添加我们要打包的 SVG 文件，这里我们可以使用公共 CDN 资源来引入 SVG，从而减少项目体积。
-------------- - -
---------
---------- -
----- ----------------------------------------------------------
-
--使用
我们现在可以在项目中使用 webpack-external-svg-sprite 了。这里我给出一个示例代码，以展示它的用法。
----- -------------------------
上述代码中，class 名称引用了我们的 SVG 图标文件名称，这个 SVG 图标文件将被打包成我们提前配置的 Sprite 文件中。我们可以通过以下方式来指定 class 名称：
------- ------------------------------------------------- ---------- - -------- ------------- ------ ---- ------- ---- --------------- -------- ----------- --------------------------------------------------------------- ---------- -
这里我们通过引用 webpack-external-svg-sprite-loader 提供的 Sprite 文件，以 #+图标名称 的方式来引用 Sprite 中的 SVG 图标。同时，我们可以设定相关的样式来控制图标的显示效果。
注意：在使用 webpack-dev-server 启动本地服务器时需要加上 host: '0.0.0.0' 以支持监听本地网络。
- ----------------------------
---------- -
----- ----------
----- -------
---- -----
-总结
通过使用 npm 包 webpack-external-svg-sprite，我们可以将多个 SVG 图标打包成一个 Sprite，从而减少了网络请求，提高了页面性能。同时，通过使用公共 CDN 资源来引用 SVG，我们也可以减少项目体积，提高加载速度。
希望这篇文章能帮助大家更好地学习和应用 webpack-external-svg-sprite 这个 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005685c81e8991b448e45fd