Disable runtime configuration completely?

Do you want to request a feature, report a bug or ask a question? Ask a question

What is the current behavior? SVGs get extracted and injected into my template, but there is ~30kb of additional code in my bundle:

What is the expected behavior? I don’t import any icons in code, they are exclusively used in the templates. It’s unused code I’d like to avoid shipping.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. My relevant config:

const iconsContext = resolve(__dirname, '../src/icons');
module.exports = {
   module: {
      rules: [
         { test: /\.svg$/, use: [
            { loader: 'svg-sprite-loader', options: { extract: true } },
            { loader: 'svgo-loader', options: { plugins: [ { removeDoctype: true }, { removeXMLProcInst: true }, { removeComments: true }, { removeMetadata: true }, { removeEditorsNSData: true }, { cleanupAttrs: true }, { convertStyleToAttrs: true }, { removeRasterImages: true }, { cleanupNumericValues: true }, { convertColors: true }, { removeUnknownsAndDefaults: true }, { removeNonInheritableGroupAttrs: true }, { removeUselessStrokeAndFill: true }, { removeViewBox: true }, { cleanupEnableBackground: true }, { removeHiddenElems: true }, { removeEmptyText: true }, { convertShapeToPath: true }, { moveElemsAttrsToGroup: true }, { moveGroupAttrsToElems: true }, { collapseGroups: true }, { convertPathData: true }, { convertTransform: true }, { removeEmptyAttrs: true }, { removeEmptyContainers: true }, { mergePaths: true }, { cleanupIDs: true }, { removeUnusedNS: true }, { transformsWithOnePath: false }, { sortAttrs: true }, { removeTitle: true } ] } }
         ], include: iconsContext },
      ],
      plugins: [
         new SpriteLoaderPlugin({ plainSprite: true })
      ]
   }
}

If you want to reproduce, here’s my repo (it’s not minimal though):

git clone https://github.com/vpdb/website.git vpdb-website
cd vpdb-website && npm install
npm run build:analyze

Please tell us about your environment:

• Node.js version: v8.9.1
• webpack version: 4.4.1
• svg-sprite-loader version: 3.7.3
• OS type & version: Windows 10 x64

I’ve tried setting runtimeGenerator to null, but that obviously didn’t work. Maybe this is achievable in any other way, otherwise I would welcome an option to only extract without bloating the JavaScript bundle.

[kisenka]

You’re right, extract runtime is not optimal, because it contains symbol id, viewBox etc. As quick workaround you can write own runtime generator which returns only path to symbol:

extract-runtime-generator.js

module.exports = function runtimeGenerator({ symbol }) {
  return `export default __webpack_public_path__ + ${JSON.stringify(symbol.request.file)}`;
};

And setup it in loader config:

{
	loader: 'svg-sprite-loader', options: {
		runtimeGenerator: require.resolve('runtime-generator-path'),
		extract: true
	}
}

[freezy]

Thanks, I’ll try that!