Rebuilds every time editing js files in watch mode.

[Vahanerevan]

Thank you for plugin it saves so much time .

Description We are having little issue with webpack watch mode: when we update any file (js,css, not svg) in source plugin regenerates files . We have 200+ icons so compilation takes 15+ seconds . Ss there any way to build once in watch mode or prevent rebuild if svgs did not change ?

We use html plugin.

compilation.assets[`sprite.svg`].source()

new SVGSpriteMapPlugin("assets/icons/**/.svg", {
  output: {
    filename: `sprite.svg`,
    svg: {
      attributes: {
        class: 'svg-sprite',
      },
    },
    svgo: true,
  },
  sprite: {
    prefix: false,
    gutter: false,
    generate: {
      title: false,
      symbol: true,
      use: true,
      view: false,
    },
  },
})

Expected behavior Expecting not to rebuild if nothing changes.

Actual behavior

Rebuild when editing any js file.

System information

 System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 1.47 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.3.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
    Watchman: 2022.06.06.00 - /usr/local/bin/watchman
  npmPackages:
    @atlas/core: 0.13.97 => 0.13.97 
    @atlas/form-manager: 1.1.6 => 1.1.6 
    @atlas/react-forms: 1.5.15 => 1.5.15 
    @atlas/routing: 0.9.21 => 0.9.21 
    @atlas/ui: 0.10.18 => 0.10.18 
    @babel/cli: ^7.16.8 => 7.18.6 
    @babel/core: 7.12.10 => 7.12.10 
    @babel/plugin-proposal-class-properties: ^7.12.1 => 7.18.6 
    @babel/plugin-proposal-decorators: ^7.12.12 => 7.18.6 
    @babel/plugin-proposal-export-default-from: ^7.10.4 => 7.18.6 
    @babel/plugin-proposal-optional-chaining: ^7.11.0 => 7.18.6 
    @babel/plugin-syntax-dynamic-import: 7.8.3 => 7.8.3 
    @babel/plugin-transform-runtime: ^7.12.10 => 7.18.6 
    @babel/preset-env: ^7.12.11 => 7.18.6 
    @babel/preset-flow: ^7.10.4 => 7.18.6 
    @babel/preset-react: ^7.12.10 => 7.18.6 
    @babel/runtime: ^7.16.3 => 7.18.6 
    @datadog/browser-rum: ^3.6.10 => 3.11.0 
    @hot-loader/react-dom: 16.14.0 => 16.14.0+4.13.0 
    @svgr/webpack: ^5.5.0 => 5.5.0 
    @testing-library/dom: ^7.24.1 => 7.31.2 
    @testing-library/jest-dom: ^5.11.4 => 5.16.4 
    @testing-library/react: ^11.0.2 => 11.2.7 
    @testing-library/react-hooks: ^3.4.1 => 3.7.0 
    @testing-library/user-event: ^12.1.3 => 12.8.3 
    @welldone-software/why-did-you-render: ^4.3.1 => 4.3.2 
    autoprefixer: ^10.4.0 => 10.4.7 
    babel-eslint: 9.0.0 => 9.0.0 
    babel-jest: ^26.3.0 => 26.6.3 
    babel-loader: 8.2.2 => 8.2.2 
    babel-plugin-import: ^1.13.0 => 1.13.5 
    babel-plugin-jsx-control-statements: ^4.1.0 => 4.1.2 
    babel-plugin-named-asset-import: ^0.2.3 => 0.2.3 
    babel-plugin-react-css-modules: ^5.2.6 => 5.2.6 
    babel-plugin-react-remove-properties: ^0.3.0 => 0.3.0 
    babel-plugin-react-transform: ^3.0.0 => 3.0.0 
    babel-plugin-syntax-async-functions: ^6.13.0 => 6.13.0 
    babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 
    babel-preset-react-app: ^6.1.0 => 6.1.0 
    circular-dependency-plugin: ^5.2.2 => 5.2.2 
    classnames: ^2.2.6 => 2.3.1 
    clean-webpack-plugin: 4.0.0 => 4.0.0 
    closure-webpack-plugin: ^2.3.0 => 2.5.0 
    country-iso-3-to-2: 1.1.0 => 1.1.0 
    cross-env: ^7.0.3 => 7.0.3 
    crypto-js: 4.0.0 => 4.0.0 
    css-loader: 6.5.1 => 6.5.1 
    css-minimizer-webpack-plugin: ^3.2.0 => 3.4.1 
    dompurify: ^2.3.4 => 2.3.8 
    eslint: ^6.8.0 => 6.8.0 
    eslint-config-airbnb: ^18.1.0 => 18.2.1 
    eslint-plugin-import: ^2.22.1 => 2.26.0 
    eslint-plugin-lodash: ^6.0.0 => 6.0.0 
    eslint-plugin-react: ^7.20.6 => 7.30.1 
    eslint-plugin-react-hooks: ^2.5.1 => 2.5.1 
    file-loader: 6.2.0 => 6.2.0 
    filemanager-webpack-plugin: ^7.0.0 => 7.0.0 
    fingerprintjs2: ^2.1.2 => 2.1.4 
    git-repo-info: 2.1.1 => 2.1.1 
    glob: 7.1.7 => 7.1.7 
    html-webpack-plugin: 5.5.0 => 5.5.0 
    i18n-iso-countries: ^6.0.0 => 6.8.0 
    jest: 26.4.2 => 26.4.2 
    jest-environment-jsdom-sixteen: ^1.0.3 => 1.0.3 
    js-yaml: 4.1.0 => 4.1.0 
    lodash: ^4.17.21 => 4.17.21 
    lodash-es: ^4.17.21 => 4.17.21 
    md5: ^2.3.0 => 2.3.0 
    mini-css-extract-plugin: 2.4.5 => 2.4.5 
    moment: ^2.24.0 => 2.29.3 
    moment-locales-webpack-plugin: ^1.2.0 => 1.2.0 
    postcss: 8.4.5 => 8.4.5 
    postcss-flexbugs-fixes: ^5.0.2 => 5.0.2 
    postcss-loader: ^6.2.0 => 6.2.1 
    postcss-scss: ^4.0.2 => 4.0.4 
    print-js: ^1.0.63 => 1.6.0 
    prop-types: 15.7.2 => 15.7.2 
    qrcode.react: ^1.0.1 => 1.0.1 
    query-string: ^6.11.1 => 6.14.1 
    react: 16.14.0 => 16.14.0 
    react-dates: ^21.8.0 => 21.8.0 
    react-dom: 16.14.0 => 16.14.0 
    react-error-boundary: ^1.2.5 => 1.2.5 
    react-google-recaptcha: ^2.1.0 => 2.1.0 
    react-gtm-module: ^2.0.10 => 2.0.11 
    react-hot-loader: ^4.13.0 => 4.13.0 
    react-hotjar: ^2.2.1 => 2.2.1 
    react-infinite-scroller: 1.2.4 => 1.2.4 
    react-inlinesvg: ^1.2.0 => 1.2.0 
    react-modal-resizable-draggable: ^0.1.4 => 0.1.6 
    react-number-format: 4.4.1 => 4.4.1 
    react-on-screen: ^2.1.1 => 2.1.1 
    react-phone-number-input: 3.0.25 => 3.0.25 
    react-qr-code: ^2.0.7 => 2.0.7 
    react-router-dom: ^5.2.0 => 5.3.3 
    react-scripts: ^3.4.4 => 3.4.4 
    react-slick: 0.28.0 => 0.28.0 
    react-test-renderer: ^16.13.1 => 16.14.0 
    react-toastify: ^6.0.8 => 6.2.0 
    react-virtualized-auto-sizer: ^1.0.2 => 1.0.6 
    react-window: ^1.8.5 => 1.8.7 
    react-window-infinite-loader: ^1.0.5 => 1.0.8 
    sass: 1.45.0 => 1.45.0 
    sass-loader: 12.4.0 => 12.4.0 
    slick-carousel: 1.8.1 => 1.8.1 
    slugify: ^1.4.5 => 1.6.5 
    speed-measure-webpack-plugin: ^1.5.0 => 1.5.0 
    string-replace-loader: ^3.1.0 => 3.1.0 
    style-loader: ^3.3.1 => 3.3.1 
    svg-spritemap-webpack-plugin: ^4.4.0 => 4.4.2 
    svgo-loader: ^3.0.0 => 3.0.1 
    thread-loader: ^3.0.4 => 3.0.4 
    webpack: 5.65.0 => 5.65.0 
    webpack-bundle-analyzer: ^4.5.0 => 4.5.0 
    webpack-cli: ^4.9.1 => 4.10.0 
    webpack-dev-server: ^4.7.3 => 4.9.2 
    webpack-manifest-plugin: 3.1.1 => 3.1.1 
    webpack-merge: 5.8.0 => 5.8.0 
    workbox-webpack-plugin: 3.6.3 => 3.6.3 
    yargs: ^15.4.1 => 15.4.1 

[cascornelissen]

To be honest, I'm not sure if that's possible but I'm willing to accept a PR that improves the performance by not generating the spritemap if no sprites changed. I might look into it myself some time in the future if I find some time.

One question I do have is whether those 15s you mentioned is the added time when the plugin is enabled or does the entire compilation take 15s (and what part is the plugin taking up in that case)? I'm asking because I can't imagine 200 sprites would take 15s to generate based on the specs you've included.

[cascornelissen]

Had half an hour of nothing to do and the changes in eae59fb seem to do what you're looking for on my end.

Could you try it out on your end by installing directly from master by running the following command?

npm install cascornelissen/svg-spritemap-webpack-plugin#master

[Vahanerevan]

Thank you . @cascornelissen we tested it we have gone from 15s to 8s . 50% speed up. It did not solve our issue but for most of people it will be enough. After investigation we found out that we had big svg files and changed out method to lazy loading . We still use plugin for other svg icons which are not big and it works perfect . Thank you so much for your help.

[cascornelissen]

I have just published 4.5.0 to npm. Thanks for the idea and for reporting back! ❤️