{"action":"closed","issue":{"url":"https://api.github.com/repos/webpack-contrib/file-loader/issues/223","repository_url":"https://api.github.com/repos/webpack-contrib/file-loader","labels_url":"https://api.github.com/repos/webpack-contrib/file-loader/issues/223/labels{/name}","comments_url":"https://api.github.com/repos/webpack-contrib/file-loader/issues/223/comments","events_url":"https://api.github.com/repos/webpack-contrib/file-loader/issues/223/events","html_url":"https://github.com/webpack-contrib/file-loader/issues/223","id":270389522,"number":223,"title":"Inline generated file paths at import site","user":{"login":"portpaw","id":495235,"avatar_url":"https://avatars1.githubusercontent.com/u/495235?v=4","gravatar_id":"","url":"https://api.github.com/users/portpaw","html_url":"https://github.com/portpaw","followers_url":"https://api.github.com/users/portpaw/followers","following_url":"https://api.github.com/users/portpaw/following{/other_user}","gists_url":"https://api.github.com/users/portpaw/gists{/gist_id}","starred_url":"https://api.github.com/users/portpaw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/portpaw/subscriptions","organizations_url":"https://api.github.com/users/portpaw/orgs","repos_url":"https://api.github.com/users/portpaw/repos","events_url":"https://api.github.com/users/portpaw/events{/privacy}","received_events_url":"https://api.github.com/users/portpaw/received_events","type":"User","site_admin":false},"labels":[{"id":595352127,"url":"https://api.github.com/repos/webpack-contrib/file-loader/labels/priority:%204%20(important)","name":"priority: 4 (important)","color":"bfdadc","default":false},{"id":595352559,"url":"https://api.github.com/repos/webpack-contrib/file-loader/labels/severity:%204%20(inconvenient)","name":"severity: 4 (inconvenient)","color":"BF4133","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-11-01T17:38:24Z","updated_at":"2018-02-21T22:22:24Z","closed_at":"2018-02-21T22:22:24Z","author_association":"NONE","body":"When you have a large number of `file-loader` imports in your app, the bloat caused by each file getting its own module wrapper can have a negative impact on your bundle size.\r\n\r\nFor the Trello web client (which has ~900 emojis being included by `file-loader`), we saw a difference of 30KB **gzipped** between bundles with the string literal file paths and an equivalent bundle with `require` calls for those file paths.\r\n\r\nDuring my investigation, I split out the 900 `require` calls for the emojis into their own entry and tried bundling that separately. The difference between string literal file paths and `file-loader`-generated paths in this case was only 10KB gzipped. I think this is due to the bundler outputting all of the module wrappers next to each other in the output, allowing gzip to take advantage of that duplication and further compress the bundle. In the real world, these module wrappers are likely to be defined sporadically throughout the bundle. Happy to hear other theories on that.\r\n\r\nSo, if we had a way to get rid of the module wrapper entirely for files that are only imported once, and instead just inline the file path at the import site, we could potentially save a lot of bytes at a particular scale.\r\n\r\nThis:\r\n\r\n```\r\nG0eA:function(e,o,i){e.exports=i.p+\"images/emoji/beginner.png\"}\r\n```\r\n\r\nAnd this:\r\n\r\n```\r\ni(\"G0eA\")\r\n```\r\n\r\nBecomes this:\r\n\r\n```\r\ni.p+\"images/emoji/beginner.png\"\r\n```\r\n\r\nThat's a savings of 41 bytes per file imported, which comes out to 36KB for 900 files (someone check my math).\r\n\r\nI'm not sure this issue can be solved in the loader itself, but might instead need to be some combination of the loader + a plugin to do the inlining. Thoughts?"}}
{"actor":{"display_login":"michael-ciniawsky"}}