{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/3932","repository_url":"https://api.github.com/repos/webpack/webpack","labels_url":"https://api.github.com/repos/webpack/webpack/issues/3932/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/3932/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/3932/events","html_url":"https://github.com/webpack/webpack/issues/3932","id":200356775,"number":3932,"title":"Code splitting and caching documentation needs improvement","user":{"login":"Kitanotori","id":36138,"avatar_url":"https://avatars3.githubusercontent.com/u/36138?v=4","gravatar_id":"","url":"https://api.github.com/users/Kitanotori","html_url":"https://github.com/Kitanotori","followers_url":"https://api.github.com/users/Kitanotori/followers","following_url":"https://api.github.com/users/Kitanotori/following{/other_user}","gists_url":"https://api.github.com/users/Kitanotori/gists{/gist_id}","starred_url":"https://api.github.com/users/Kitanotori/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kitanotori/subscriptions","organizations_url":"https://api.github.com/users/Kitanotori/orgs","repos_url":"https://api.github.com/users/Kitanotori/repos","events_url":"https://api.github.com/users/Kitanotori/events{/privacy}","received_events_url":"https://api.github.com/users/Kitanotori/received_events","type":"User","site_admin":false},"labels":[{"id":665191202,"url":"https://api.github.com/repos/webpack/webpack/labels/inactive","name":"inactive","color":"000000","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-01-12T12:39:24Z","updated_at":"2017-11-10T15:11:56Z","closed_at":null,"author_association":"NONE","body":"I've been now trying the past few days to figure out \"the correct approach\" for splitting my app into meaningful minified bundles, and have come to the conclusion that the documentation is either out-of-date or insufficient. I of course understand that development has higher priority than documentation, but I think code splitting is one of the great core features of Webpack, and deserves documentation that enables also ordinary developers to benefit from it. Therefore, I would like to share some thoughts on how to improve the documentation.\r\n\r\nIn order to improve the documentation, I believe that first a basic use case should be defined. Based on my own projects and experience, I propose following basic case:\r\n\r\n# Code splitting: the basic case\r\n\r\n> A meaningful basic code splitting case is separating an app into two bundles: application bundle containing the internal project code, and vendor bundle containing all the external dependencies. No server-side framework used, and HMR support should be enabled.\r\n\r\nBecause there are so many different ways of handling styles, I think CSS splitting can be excluded from the basic case. Tutorial that was the most helpful for me was by @okonet [in his blog](https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.vedtt18pu). Other related tutorials were also found [here](http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/) and [here](https://medium.com/@puppybits/webpack-code-splitting-by-routes-92f96cf733f2#.t91na5fw4). And some relevant documentation:\r\n\r\nhttps://webpack.js.org/plugins/commons-chunk-plugin/\r\nhttps://webpack.js.org/guides/caching/\r\nhttps://webpack.js.org/guides/code-splitting-libraries/\r\n\r\n## The main issues with the existing documentation and the tutorials:\r\n\r\n1. Unclear how to get all external dependencies into the vendor bundle without having to specify them individually (currently needs some hacking - possibly using imported package.json(?) - that is not obvious from the docs).\r\n2. Unclear how to handle script tags for the generated bundles with the changing hashes in their filenames (has naturally a lot to do with the particular server environment, but nevertheless needs more clarification; in the basic case, should be assumed that there is no server-side framework/templating available)\r\n3. Unclear how to make code splitting play nicely with HMR (what needs to be taken into account, effect on various plugins related to code splitting, etc.)\r\n\r\nParticularly I'm curious on 2., as I can't seem to think of a way on how to keep the src attribute of the scripts up-to-date with the filenames of the generated cache-friendly bundles, while having HMR working. How have people solved this without using server-side tricks? Or, how to solve this using server-side tricks but still have HMR working?\r\n\r\nI'm using React and the latest version of Webpack. When I have time and more clear understanding of code splitting, I'm planning to update [this example project](https://github.com/Kitanotori/react-webpack-babel-hotreload-example) with code splitting."},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/343498719","html_url":"https://github.com/webpack/webpack/issues/3932#issuecomment-343498719","issue_url":"https://api.github.com/repos/webpack/webpack/issues/3932","id":343498719,"user":{"login":"webpack-bot","id":26676291,"avatar_url":"https://avatars0.githubusercontent.com/u/26676291?v=4","gravatar_id":"","url":"https://api.github.com/users/webpack-bot","html_url":"https://github.com/webpack-bot","followers_url":"https://api.github.com/users/webpack-bot/followers","following_url":"https://api.github.com/users/webpack-bot/following{/other_user}","gists_url":"https://api.github.com/users/webpack-bot/gists{/gist_id}","starred_url":"https://api.github.com/users/webpack-bot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webpack-bot/subscriptions","organizations_url":"https://api.github.com/users/webpack-bot/orgs","repos_url":"https://api.github.com/users/webpack-bot/repos","events_url":"https://api.github.com/users/webpack-bot/events{/privacy}","received_events_url":"https://api.github.com/users/webpack-bot/received_events","type":"User","site_admin":false},"created_at":"2017-11-10T15:11:56Z","updated_at":"2017-11-10T15:11:56Z","author_association":"NONE","body":"**This issue had no activity for at least half a year.**\n\nIt's subject to automatic issue closing if there is no activity in the next 15 days."}}
{"actor":{"display_login":"webpack-bot"}}