vue-cli-service compiling time increase drastically when svg-spritemap-webpack-plugin is added

I am using webpack@4.28.4 on a VueJS 2.6.10 project, and “svg-spritemap-webpack-plugin”: “3.3.7” My vue.config.js looks like :

const SVGSpritemapPlugin = require("svg-spritemap-webpack-plugin");

module.exports = {
  devServer: {
    port: "8082"
  },
  configureWebpack: {
    plugins: [
      new SVGSpritemapPlugin()
    ]
  }
};

The compiling time was ~150ms before installing the plugin, after installation it went to ~8000ms. I’ve commented the line new SVGSpritemapPlugin() and the compiling time went back to normal (around 150ms)

[wal0x]

I investigated the spritemap I found two symbol tags. I rendred the svg and “surprisingly” I found two diagrams I have never seen before and I have no idea where it come from. (5min later)… I found the two SVGs in two dependencies in my node_modules. To tell the plugin to look for SVGs only inside the svgs folder I changed my vue.config.js to look like this :

const SVGSpritemapPlugin = require("svg-spritemap-webpack-plugin");

module.exports = {
  devServer: {
    port: "8082"
  },
  configureWebpack: {
    plugins: [new SVGSpritemapPlugin("svgs/**/*.svg")]
  }
};

My folder s tree is like this :

|__node_modules
|__public
|__src
|__svgs
|__vue.config.js
|...

And the problem is SOLVED

[cascornelissen]

That’s probably because it’s matching more SVGs but I can’t know for sure without a configuration object. You could open the spritemap SVG in an editor and check some id’s of the symbols, that might help finding the SVGs.

The best way is to pass a specific glob as the first argument instead of using the default that just matches all SVGs recursively.