Search code examples
webpackurlloader

Webpack URLLoader limit want small

I want my url loader limit small but many examples have over 5000. Why do that?

If the limit is big then the css file size is also big

{
    test: /\.(jpe?g|png|gif|ico)$/,
    loader:  `url-loader?limit=20&name=[path][name]-[hash].[ext]&context=${__dirname + '/app/assets'}`
}

Here's an example comparing a limit of 1000 with a limit of 20:

comparison example limit 1000 vs limit 20

Solution

  • It depends on what you're expectations are for the final bundle size. If bundle size is not a concern and you are ok with all images being base64 encoded into it then you can keep the limit high. A lower limit means that any images above that size will not be added to the final bundle. Image tags pointing to the assets/image folder will be added instead.