npm 包 webpack-external-svg-sprite 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 SVG 可以带来更好的用户体验和更高的可扩展性。而在实际开发中，我们常常需要在项目中多次利用大量的 SVG 图标，这样会导致浏览器加载过多的请求，影响页面性能。为了解决这个问题，我们可以使用 webpack-external-svg-sprite 这个 npm 包来将多个 SVG 图标打包成一个 SVG Sprite，从而避免了过多的请求，提高了页面性能。

安装

在使用 webpack-external-svg-sprite 之前，我们需要安装它。

npm install webpack-external-svg-sprite --save-dev

配置

接下来，我们需要配置 webpack.config.js。

首先，在 plugins 中添加 svg-sprite-loader 插件，并配置其 options 选项，这里我们设置 extract:true 和 spriteFilename: 'sprite.[hash:8].svg'，分别表示将 SVG Sprite 提取到单独的文件中和生成的文件名。

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

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

其次，在 externals 中添加我们要打包的 SVG 文件，这里我们可以使用公共 CDN 资源来引入 SVG，从而减少项目体积。

module.exports = {
  //其他配置...
  externals: {
    icon: 'https://at.alicdn.com/t/font_300352_r2fshdpet9yqq1or.ttf'
  }
};

使用

我们现在可以在项目中使用 webpack-external-svg-sprite 了。这里我给出一个示例代码，以展示它的用法。

<span class="icon-tick"></span>

上述代码中，class 名称引用了我们的 SVG 图标文件名称，这个 SVG 图标文件将被打包成我们提前配置的 Sprite 文件中。我们可以通过以下方式来指定 class 名称：

@import '~webpack-external-svg-sprite-loader/Sprite.svg';
.icon-tick {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background: url('~webpack-external-svg-sprite-loader/Sprite.svg#icon-tick') no-repeat;
}

这里我们通过引用 webpack-external-svg-sprite-loader 提供的 Sprite 文件，以 #+图标名称的方式来引用 Sprite 中的 SVG 图标。同时，我们可以设定相关的样式来控制图标的显示效果。

注意：在使用 webpack-dev-server 启动本地服务器时需要加上 host: '0.0.0.0' 以支持监听本地网络。

# 注：这里是对webpack.config.js增加的配置
devServer: {
    host: '0.0.0.0',
    port: '8081',
    hot: true,
}

总结

通过使用 npm 包 webpack-external-svg-sprite，我们可以将多个 SVG 图标打包成一个 Sprite，从而减少了网络请求，提高了页面性能。同时，通过使用公共 CDN 资源来引用 SVG，我们也可以减少项目体积，提高加载速度。

希望这篇文章能帮助大家更好地学习和应用 webpack-external-svg-sprite 这个 npm 包。

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