{"action":"created","comment":{"url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/comments/124137060","pull_request_review_id":46401118,"id":124137060,"diff_hunk":"@@ -1,41 +1,174 @@\n ---\n title: Code Splitting\n-sort: 14\n+sort: 9\n contributors:\n   - pksjce\n   - pastelsky\n   - simon04\n+  - jonwheeler\n+  - johnstew\n+  - shinxi\n+  - tomtasche\n+  - levy9527\n+  - rahulcs\n+  - chrisVillanueva\n+  - rafde\n+  - bartushek\n+  - shaunwallace\n+  - skipjack\n+  - jakearchibald\n+  - TheDutchCoder\n ---\n \n-Code splitting is one of the most compelling features of webpack. It allows you to split your code into various bundles which you can then load on demand — like when a user navigates to a matching route, or on an event from the user. This allows for smaller bundles, and allows you to control resource load prioritization, which if used correctly, can have a major impact on your application load time.\n+Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.\n \n-There are mainly two kinds of code splitting that can be accomplished with webpack:\n+There are three general approaches to code splitting available:\n \n+- Entry Points: Manually split code using [`entry`](/configuration/entry-context) configuration.\n+- Plugins & Loaders: Certain plugins and loaders can be used to split code in a variety of different ways.\n+- Dynamic Imports: This method allows splitting code via inline function calls within modules.\n \n-## Resource Splitting\n \n-Vendor and CSS code splitting methods help with both caching and parallel loading.\n+## Entry Points\n \n-### Vendor Code Splitting\n+This is by far the easiest, and most intuitive, way to split code. However, it is more manual and has a some pitfalls we will go over. Let's take a look at how we might split the core libraries and frameworks an application uses from the actual source code:\n \n-A typical application can depend on many third party libraries for framework/functionality needs. Unlike application code, code present in these libraries does not change often.\n+__webpack.config.js__\n \n-If we keep code from these libraries in its own bundle, separate from the application code, we can leverage the browser's caching mechanism to cache these files for longer durations on the end user's machine.\n+``` js\n+const path = require('path');\n \n-For this to work, the `[hash]` portion in the vendor filename must remain constant, regardless of application code changes. Learn [how to split vendor/library](/guides/code-splitting-libraries) code using the `CommonsChunkPlugin`.\n+module.exports = {\n+  entry: {\n+    index: './src/index.js',\n+    vendor: [\n+      'lodash'\n+    ]\n+  },\n+  output: {\n+    filename: '[name].bundle.js',\n+    path: path.resolve(__dirname, 'dist')\n+  }\n+};\n+```\n \n-### CSS Splitting\n+This will yield the following build result:\n \n-You might also want to split your styles into a separate bundle, independent from application logic.\n-This enhances cacheability of your styles and allows the browser to load the styles in-parallel with your application code, thus preventing a FOUC ([flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)).\n+?> Add bash example of webpack output\n \n-Learn [how to split CSS](/guides/code-splitting-css) using the `ExtractTextWebpackPlugin`.\n+As mentioned there are some pitfalls to this approach:\n \n+- If there are any duplicated modules between entry chunks they will be included in both bundles.\n+- It isn't as flexible and can't be used to dynamically split code with the core application logic.\n \n-## On Demand Code Splitting\n+The first of these two points is definitely an issue for our example, as `moment` is also imported within `./src/index.js` and will thus be duplicated in the output. See the `CommonChunkPlugin` example below for a solution to this problem.\n \n-While resource splitting of the previous kind requires the user to specify the split points upfront in the configuration, one can also create dynamic split points in the application code.\n \n-This can be used for more granular chunking of code, for example, per our application routes or as per predicted user behaviour. This allows the user to load non-essential assets on demand.\n+## Plugins & Loaders\n \n-Learn [how to split on demand](/guides/code-splitting-async) using `import()` or `require.ensure()`.\n+There are multiple plugins and loaders in webpack's ecosystem that can help with splitting and managing split code. The most widely utilized of these is the [`CommonsChunkPlugin`](/plugins/commons-chunk-plugin), a fairly advanced tool that allows us to extract common dependencies into an existing entry chunk or an entirely new chunk. Let's use this to de-duplicate the `moment` dependency from the previous example:\n+\n+__webpack.config.js__\n+\n+``` js\n+const path = require('path');\n+const webpack = require('webpack');\n+\n+module.exports = {\n+  entry: {\n+    index: './src/index.js',\n+    vendor: [\n+      'lodash'\n+    ]\n+  },\n+  plugins: [\n+    new webpack.optimize.CommonsChunkPlugin({\n+      name: 'vendor' // Specify the common bundle's name.\n+    })\n+  ],\n+  output: {\n+    filename: '[name].bundle.js',\n+    path: path.resolve(__dirname, 'dist')\n+  }\n+};\n+```\n+\n+This will yield the following build result (notice how our `index.bundle.js` has shrunk in size):\n+\n+?> Add bash example of webpack output\n+\n+Here are some other useful plugins and loaders provide by the community for splitting code:\n+\n+- [`ExtractTextPlugin`](/plugins/extract-text-webpack-plugin): Useful for splitting CSS out from the main application.\n+- [`bundle-loader`](/loaders/bundle-loader): Used to split code and lazy load the resulting bundles.","path":"content/guides/code-splitting.md","position":120,"original_position":120,"commit_id":"f00d9cf452dc93260fae5cd818cda60e3504e042","original_commit_id":"f00d9cf452dc93260fae5cd818cda60e3504e042","user":{"login":"skipjack","id":8988697,"avatar_url":"https://avatars0.githubusercontent.com/u/8988697?v=3","gravatar_id":"","url":"https://api.github.com/users/skipjack","html_url":"https://github.com/skipjack","followers_url":"https://api.github.com/users/skipjack/followers","following_url":"https://api.github.com/users/skipjack/following{/other_user}","gists_url":"https://api.github.com/users/skipjack/gists{/gist_id}","starred_url":"https://api.github.com/users/skipjack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skipjack/subscriptions","organizations_url":"https://api.github.com/users/skipjack/orgs","repos_url":"https://api.github.com/users/skipjack/repos","events_url":"https://api.github.com/users/skipjack/events{/privacy}","received_events_url":"https://api.github.com/users/skipjack/received_events","type":"User","site_admin":false},"body":"This one [works fine](https://webpack.js.org/loaders/bundle-loader) for me as well.","created_at":"2017-06-26T22:23:41Z","updated_at":"2017-06-26T22:23:42Z","html_url":"https://github.com/webpack/webpack.js.org/pull/1338#discussion_r124137060","pull_request_url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338","_links":{"self":{"href":"https://api.github.com/repos/webpack/webpack.js.org/pulls/comments/124137060"},"html":{"href":"https://github.com/webpack/webpack.js.org/pull/1338#discussion_r124137060"},"pull_request":{"href":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338"}}},"pull_request":{"url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338","id":127334495,"html_url":"https://github.com/webpack/webpack.js.org/pull/1338","diff_url":"https://github.com/webpack/webpack.js.org/pull/1338.diff","patch_url":"https://github.com/webpack/webpack.js.org/pull/1338.patch","issue_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/1338","number":1338,"state":"open","locked":false,"title":"Rework Code Splitting Guides","user":{"login":"skipjack","id":8988697,"avatar_url":"https://avatars0.githubusercontent.com/u/8988697?v=3","gravatar_id":"","url":"https://api.github.com/users/skipjack","html_url":"https://github.com/skipjack","followers_url":"https://api.github.com/users/skipjack/followers","following_url":"https://api.github.com/users/skipjack/following{/other_user}","gists_url":"https://api.github.com/users/skipjack/gists{/gist_id}","starred_url":"https://api.github.com/users/skipjack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/skipjack/subscriptions","organizations_url":"https://api.github.com/users/skipjack/orgs","repos_url":"https://api.github.com/users/skipjack/repos","events_url":"https://api.github.com/users/skipjack/events{/privacy}","received_events_url":"https://api.github.com/users/skipjack/received_events","type":"User","site_admin":false},"body":"This pr attempts to:\r\n\r\n- Merge _Code Splitting_ guides by removing all caching discussion and other extraneous content.\r\n    - Focuses on actual code splitting approaches instead.\r\n    - Moves certain `import()` documentation to the _Module API_ page.\r\n    - Uses links to prevent content duplication.\r\n- Replace `lazy-load-react` with a short, framework-agnostic `lazy-loading` page.\r\n    - Still has a place at the bottom for links to framework-specific approaches.\r\n\r\nResolves #1333 (though some of that discussion relates to #652)\r\n\r\ncc @TheDutchCoder @jakearchibald -- I'll update this again once it's ready for review which should be within the next hour or two.\r\n\r\n@TheDutchCoder I could use your help with a few sections in the examples that I left as TODOs for now. Before it's merged, or in a follow-up PR, we'll make sure they are fully in sync with those from `getting-started`.\r\n\r\n@jakearchibald I read through your suggested edits and the other comments from #1333. Seeing as I changed the direction of this guide a bit, I think most of your discussed changes would make more sense in the _Caching_ guide (which would mention _Code Splitting_ as a pre-requisite). If you'd be up for tackling that guide in a follow up PR, which should take care of #652, that would be amazing.","created_at":"2017-06-24T16:01:48Z","updated_at":"2017-06-26T22:23:42Z","closed_at":null,"merged_at":null,"merge_commit_sha":"da2fbeae8ad174c32c475466335c83f5df27f09e","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338/commits","review_comments_url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338/comments","review_comment_url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/comments{/number}","comments_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/1338/comments","statuses_url":"https://api.github.com/repos/webpack/webpack.js.org/statuses/f00d9cf452dc93260fae5cd818cda60e3504e042","head":{"label":"webpack:code-splitting-guides","ref":"code-splitting-guides","sha":"f00d9cf452dc93260fae5cd818cda60e3504e042","user":{"login":"webpack","id":2105791,"avatar_url":"https://avatars1.githubusercontent.com/u/2105791?v=3","gravatar_id":"","url":"https://api.github.com/users/webpack","html_url":"https://github.com/webpack","followers_url":"https://api.github.com/users/webpack/followers","following_url":"https://api.github.com/users/webpack/following{/other_user}","gists_url":"https://api.github.com/users/webpack/gists{/gist_id}","starred_url":"https://api.github.com/users/webpack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webpack/subscriptions","organizations_url":"https://api.github.com/users/webpack/orgs","repos_url":"https://api.github.com/users/webpack/repos","events_url":"https://api.github.com/users/webpack/events{/privacy}","received_events_url":"https://api.github.com/users/webpack/received_events","type":"Organization","site_admin":false},"repo":{"id":61886109,"name":"webpack.js.org","full_name":"webpack/webpack.js.org","owner":{"login":"webpack","id":2105791,"avatar_url":"https://avatars1.githubusercontent.com/u/2105791?v=3","gravatar_id":"","url":"https://api.github.com/users/webpack","html_url":"https://github.com/webpack","followers_url":"https://api.github.com/users/webpack/followers","following_url":"https://api.github.com/users/webpack/following{/other_user}","gists_url":"https://api.github.com/users/webpack/gists{/gist_id}","starred_url":"https://api.github.com/users/webpack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webpack/subscriptions","organizations_url":"https://api.github.com/users/webpack/orgs","repos_url":"https://api.github.com/users/webpack/repos","events_url":"https://api.github.com/users/webpack/events{/privacy}","received_events_url":"https://api.github.com/users/webpack/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/webpack/webpack.js.org","description":"New repository for webpack documentation and more!","fork":false,"url":"https://api.github.com/repos/webpack/webpack.js.org","forks_url":"https://api.github.com/repos/webpack/webpack.js.org/forks","keys_url":"https://api.github.com/repos/webpack/webpack.js.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/webpack/webpack.js.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/webpack/webpack.js.org/teams","hooks_url":"https://api.github.com/repos/webpack/webpack.js.org/hooks","issue_events_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/events{/number}","events_url":"https://api.github.com/repos/webpack/webpack.js.org/events","assignees_url":"https://api.github.com/repos/webpack/webpack.js.org/assignees{/user}","branches_url":"https://api.github.com/repos/webpack/webpack.js.org/branches{/branch}","tags_url":"https://api.github.com/repos/webpack/webpack.js.org/tags","blobs_url":"https://api.github.com/repos/webpack/webpack.js.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/webpack/webpack.js.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/webpack/webpack.js.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/webpack/webpack.js.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/webpack/webpack.js.org/statuses/{sha}","languages_url":"https://api.github.com/repos/webpack/webpack.js.org/languages","stargazers_url":"https://api.github.com/repos/webpack/webpack.js.org/stargazers","contributors_url":"https://api.github.com/repos/webpack/webpack.js.org/contributors","subscribers_url":"https://api.github.com/repos/webpack/webpack.js.org/subscribers","subscription_url":"https://api.github.com/repos/webpack/webpack.js.org/subscription","commits_url":"https://api.github.com/repos/webpack/webpack.js.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/webpack/webpack.js.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/webpack/webpack.js.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/webpack/webpack.js.org/contents/{+path}","compare_url":"https://api.github.com/repos/webpack/webpack.js.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/webpack/webpack.js.org/merges","archive_url":"https://api.github.com/repos/webpack/webpack.js.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/webpack/webpack.js.org/downloads","issues_url":"https://api.github.com/repos/webpack/webpack.js.org/issues{/number}","pulls_url":"https://api.github.com/repos/webpack/webpack.js.org/pulls{/number}","milestones_url":"https://api.github.com/repos/webpack/webpack.js.org/milestones{/number}","notifications_url":"https://api.github.com/repos/webpack/webpack.js.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/webpack/webpack.js.org/labels{/name}","releases_url":"https://api.github.com/repos/webpack/webpack.js.org/releases{/id}","deployments_url":"https://api.github.com/repos/webpack/webpack.js.org/deployments","created_at":"2016-06-24T13:22:52Z","updated_at":"2017-06-26T07:42:42Z","pushed_at":"2017-06-26T22:11:06Z","git_url":"git://github.com/webpack/webpack.js.org.git","ssh_url":"git@github.com:webpack/webpack.js.org.git","clone_url":"https://github.com/webpack/webpack.js.org.git","svn_url":"https://github.com/webpack/webpack.js.org","homepage":"https://webpack.js.org","size":150674,"stargazers_count":531,"watchers_count":531,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":835,"mirror_url":null,"open_issues_count":50,"forks":835,"open_issues":50,"watchers":531,"default_branch":"master"}},"base":{"label":"webpack:master","ref":"master","sha":"17317f91c1bf3aeb44000df4c29fe135cee71e05","user":{"login":"webpack","id":2105791,"avatar_url":"https://avatars1.githubusercontent.com/u/2105791?v=3","gravatar_id":"","url":"https://api.github.com/users/webpack","html_url":"https://github.com/webpack","followers_url":"https://api.github.com/users/webpack/followers","following_url":"https://api.github.com/users/webpack/following{/other_user}","gists_url":"https://api.github.com/users/webpack/gists{/gist_id}","starred_url":"https://api.github.com/users/webpack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webpack/subscriptions","organizations_url":"https://api.github.com/users/webpack/orgs","repos_url":"https://api.github.com/users/webpack/repos","events_url":"https://api.github.com/users/webpack/events{/privacy}","received_events_url":"https://api.github.com/users/webpack/received_events","type":"Organization","site_admin":false},"repo":{"id":61886109,"name":"webpack.js.org","full_name":"webpack/webpack.js.org","owner":{"login":"webpack","id":2105791,"avatar_url":"https://avatars1.githubusercontent.com/u/2105791?v=3","gravatar_id":"","url":"https://api.github.com/users/webpack","html_url":"https://github.com/webpack","followers_url":"https://api.github.com/users/webpack/followers","following_url":"https://api.github.com/users/webpack/following{/other_user}","gists_url":"https://api.github.com/users/webpack/gists{/gist_id}","starred_url":"https://api.github.com/users/webpack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webpack/subscriptions","organizations_url":"https://api.github.com/users/webpack/orgs","repos_url":"https://api.github.com/users/webpack/repos","events_url":"https://api.github.com/users/webpack/events{/privacy}","received_events_url":"https://api.github.com/users/webpack/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/webpack/webpack.js.org","description":"New repository for webpack documentation and more!","fork":false,"url":"https://api.github.com/repos/webpack/webpack.js.org","forks_url":"https://api.github.com/repos/webpack/webpack.js.org/forks","keys_url":"https://api.github.com/repos/webpack/webpack.js.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/webpack/webpack.js.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/webpack/webpack.js.org/teams","hooks_url":"https://api.github.com/repos/webpack/webpack.js.org/hooks","issue_events_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/events{/number}","events_url":"https://api.github.com/repos/webpack/webpack.js.org/events","assignees_url":"https://api.github.com/repos/webpack/webpack.js.org/assignees{/user}","branches_url":"https://api.github.com/repos/webpack/webpack.js.org/branches{/branch}","tags_url":"https://api.github.com/repos/webpack/webpack.js.org/tags","blobs_url":"https://api.github.com/repos/webpack/webpack.js.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/webpack/webpack.js.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/webpack/webpack.js.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/webpack/webpack.js.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/webpack/webpack.js.org/statuses/{sha}","languages_url":"https://api.github.com/repos/webpack/webpack.js.org/languages","stargazers_url":"https://api.github.com/repos/webpack/webpack.js.org/stargazers","contributors_url":"https://api.github.com/repos/webpack/webpack.js.org/contributors","subscribers_url":"https://api.github.com/repos/webpack/webpack.js.org/subscribers","subscription_url":"https://api.github.com/repos/webpack/webpack.js.org/subscription","commits_url":"https://api.github.com/repos/webpack/webpack.js.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/webpack/webpack.js.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/webpack/webpack.js.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/webpack/webpack.js.org/contents/{+path}","compare_url":"https://api.github.com/repos/webpack/webpack.js.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/webpack/webpack.js.org/merges","archive_url":"https://api.github.com/repos/webpack/webpack.js.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/webpack/webpack.js.org/downloads","issues_url":"https://api.github.com/repos/webpack/webpack.js.org/issues{/number}","pulls_url":"https://api.github.com/repos/webpack/webpack.js.org/pulls{/number}","milestones_url":"https://api.github.com/repos/webpack/webpack.js.org/milestones{/number}","notifications_url":"https://api.github.com/repos/webpack/webpack.js.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/webpack/webpack.js.org/labels{/name}","releases_url":"https://api.github.com/repos/webpack/webpack.js.org/releases{/id}","deployments_url":"https://api.github.com/repos/webpack/webpack.js.org/deployments","created_at":"2016-06-24T13:22:52Z","updated_at":"2017-06-26T07:42:42Z","pushed_at":"2017-06-26T22:11:06Z","git_url":"git://github.com/webpack/webpack.js.org.git","ssh_url":"git@github.com:webpack/webpack.js.org.git","clone_url":"https://github.com/webpack/webpack.js.org.git","svn_url":"https://github.com/webpack/webpack.js.org","homepage":"https://webpack.js.org","size":150674,"stargazers_count":531,"watchers_count":531,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":835,"mirror_url":null,"open_issues_count":50,"forks":835,"open_issues":50,"watchers":531,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338"},"html":{"href":"https://github.com/webpack/webpack.js.org/pull/1338"},"issue":{"href":"https://api.github.com/repos/webpack/webpack.js.org/issues/1338"},"comments":{"href":"https://api.github.com/repos/webpack/webpack.js.org/issues/1338/comments"},"review_comments":{"href":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338/comments"},"review_comment":{"href":"https://api.github.com/repos/webpack/webpack.js.org/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/webpack/webpack.js.org/pulls/1338/commits"},"statuses":{"href":"https://api.github.com/repos/webpack/webpack.js.org/statuses/f00d9cf452dc93260fae5cd818cda60e3504e042"}}}}
{"actor":{"display_login":"skipjack"}}