{"action":"created","comment":{"url":"https://api.github.com/repos/webpack/webpack.io/pulls/comments/76239885","id":76239885,"diff_hunk":"@@ -0,0 +1,258 @@\n+---\n+title: Long-term caching\n+---\n+\n+To enable long-term caching of static resources produced by webpack:\n+\n+1. Use `[chunkhash]` to add a content-dependent cache-buster to each file.\n+1. Use compiler stats to get the file names when requiring resources in HTML.\n+1. Generate the chunk-manifest JSON and inline it into the HTML page before loading resources.\n+1. Ensure that the entry point chunk containing the bootstrapping code doesn’t change its hash over time for the same set of dependencies.\n+\n+## The problem\n+\n+Each time something needs to be updated in our code, it has to be re-deployed on the server and then re-downloaded by all clients. This is clearly very inefficient since fetching resources over the network can be slow. This is why browsers cache static resources. But the way it works has a pitfall: if we don’t change filenames of our resources when deploying a new version, browser might think it hasn’t been updated and client will get a cached version of it.\n+\n+Probably the simplest way to tell the browser to download a newer version is to alter asset’s file name. In a pre-webpack era we used to add a build number to the filenames as a parameter and then increment it:\n+\n+```\n+application.js?build=1\n+application.css?build=1\n+```\n+\n+It is even easier to do with webpack: each webpack build generates a unique hash which can be used to compose a filename. The following example config will generate 2 files (1 per entry point) with a hash in filenames:\n+\n+```js\n+// webpack.config.js\n+module.exports = {\n+  entry: {\n+    vendor: './src/vendor.js',\n+    main: './src/index.js'\n+  },\n+  output: {\n+    path: path.join(__dirname, 'build'),\n+    filename: '[name].[hash].js'\n+  }\n+};\n+```\n+\n+Running webpack with this config will produce the following output:\n+\n+```\n+Hash: 55e783391098c2496a8f\n+Version: webpack 1.10.1\n+Time: 58ms\n+Asset Size Chunks Chunk Names\n+main.55e783391098c2496a8f.js 1.43 kB 0 [emitted] main\n+vendor.55e783391098c2496a8f.js 1.43 kB 1 [emitted] vendor\n+[0] ./src/index.js 46 bytes {0} [built]\n+[0] ./src/vendor.js 40 bytes {1} [built]\n+```\n+\n+But the problem here is that, *each* time we create a new build, all filenames will get altered and clients will have to re-download the whole application code again. So how can we guarantee that clients always get the latest versions of assets without re-downloading all of them?\n+\n+## Generating unique hashes for each file\n+\n+What if we could produce the same filename if the contents of the file did not change between builds? For example, the file where we put all our libraries and other vendor stuff does not change that often.\n+\n+### Pro Tip!\n+\n+> Separate your vendor and application code with [CommonsChunkPlugin](http://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk) and create an explicit vendor chunk to prevent it from changing too often.","path":"content/how-to/long-term-caching.md","position":60,"original_position":60,"commit_id":"c4d390c86024d9f7263bfca2e2fada9764a89b10","original_commit_id":"c4d390c86024d9f7263bfca2e2fada9764a89b10","user":{"login":"TheLarkInn","id":3408176,"avatar_url":"https://avatars.githubusercontent.com/u/3408176?v=3","gravatar_id":"","url":"https://api.github.com/users/TheLarkInn","html_url":"https://github.com/TheLarkInn","followers_url":"https://api.github.com/users/TheLarkInn/followers","following_url":"https://api.github.com/users/TheLarkInn/following{/other_user}","gists_url":"https://api.github.com/users/TheLarkInn/gists{/gist_id}","starred_url":"https://api.github.com/users/TheLarkInn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TheLarkInn/subscriptions","organizations_url":"https://api.github.com/users/TheLarkInn/orgs","repos_url":"https://api.github.com/users/TheLarkInn/repos","events_url":"https://api.github.com/users/TheLarkInn/events{/privacy}","received_events_url":"https://api.github.com/users/TheLarkInn/received_events","type":"User","site_admin":false},"body":"It is a special syntax that allows for styled tips on the page. So even if it looks weird on the markdown it will look awesome on the site. ","created_at":"2016-08-25T13:16:08Z","updated_at":"2016-08-25T13:16:08Z","html_url":"https://github.com/webpack/webpack.io/pull/75#discussion_r76239885","pull_request_url":"https://api.github.com/repos/webpack/webpack.io/pulls/75","_links":{"self":{"href":"https://api.github.com/repos/webpack/webpack.io/pulls/comments/76239885"},"html":{"href":"https://github.com/webpack/webpack.io/pull/75#discussion_r76239885"},"pull_request":{"href":"https://api.github.com/repos/webpack/webpack.io/pulls/75"}}},"pull_request":{"url":"https://api.github.com/repos/webpack/webpack.io/pulls/75","id":82712201,"html_url":"https://github.com/webpack/webpack.io/pull/75","diff_url":"https://github.com/webpack/webpack.io/pull/75.diff","patch_url":"https://github.com/webpack/webpack.io/pull/75.patch","issue_url":"https://api.github.com/repos/webpack/webpack.io/issues/75","number":75,"state":"open","locked":false,"title":"Added Long-term caching page","user":{"login":"okonet","id":11071,"avatar_url":"https://avatars.githubusercontent.com/u/11071?v=3","gravatar_id":"","url":"https://api.github.com/users/okonet","html_url":"https://github.com/okonet","followers_url":"https://api.github.com/users/okonet/followers","following_url":"https://api.github.com/users/okonet/following{/other_user}","gists_url":"https://api.github.com/users/okonet/gists{/gist_id}","starred_url":"https://api.github.com/users/okonet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/okonet/subscriptions","organizations_url":"https://api.github.com/users/okonet/orgs","repos_url":"https://api.github.com/users/okonet/repos","events_url":"https://api.github.com/users/okonet/events{/privacy}","received_events_url":"https://api.github.com/users/okonet/received_events","type":"User","site_admin":false},"body":"Based on https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.1ow59wp12","created_at":"2016-08-25T12:41:14Z","updated_at":"2016-08-25T13:16:08Z","closed_at":null,"merged_at":null,"merge_commit_sha":"05d6776668dc916e6a3974da20389da219f2cddf","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/webpack/webpack.io/pulls/75/commits","review_comments_url":"https://api.github.com/repos/webpack/webpack.io/pulls/75/comments","review_comment_url":"https://api.github.com/repos/webpack/webpack.io/pulls/comments{/number}","comments_url":"https://api.github.com/repos/webpack/webpack.io/issues/75/comments","statuses_url":"https://api.github.com/repos/webpack/webpack.io/statuses/c4d390c86024d9f7263bfca2e2fada9764a89b10","head":{"label":"okonet:feature/long-term-caching","ref":"feature/long-term-caching","sha":"c4d390c86024d9f7263bfca2e2fada9764a89b10","user":{"login":"okonet","id":11071,"avatar_url":"https://avatars.githubusercontent.com/u/11071?v=3","gravatar_id":"","url":"https://api.github.com/users/okonet","html_url":"https://github.com/okonet","followers_url":"https://api.github.com/users/okonet/followers","following_url":"https://api.github.com/users/okonet/following{/other_user}","gists_url":"https://api.github.com/users/okonet/gists{/gist_id}","starred_url":"https://api.github.com/users/okonet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/okonet/subscriptions","organizations_url":"https://api.github.com/users/okonet/orgs","repos_url":"https://api.github.com/users/okonet/repos","events_url":"https://api.github.com/users/okonet/events{/privacy}","received_events_url":"https://api.github.com/users/okonet/received_events","type":"User","site_admin":false},"repo":{"id":66547729,"name":"webpack.io","full_name":"okonet/webpack.io","owner":{"login":"okonet","id":11071,"avatar_url":"https://avatars.githubusercontent.com/u/11071?v=3","gravatar_id":"","url":"https://api.github.com/users/okonet","html_url":"https://github.com/okonet","followers_url":"https://api.github.com/users/okonet/followers","following_url":"https://api.github.com/users/okonet/following{/other_user}","gists_url":"https://api.github.com/users/okonet/gists{/gist_id}","starred_url":"https://api.github.com/users/okonet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/okonet/subscriptions","organizations_url":"https://api.github.com/users/okonet/orgs","repos_url":"https://api.github.com/users/okonet/repos","events_url":"https://api.github.com/users/okonet/events{/privacy}","received_events_url":"https://api.github.com/users/okonet/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/okonet/webpack.io","description":null,"fork":true,"url":"https://api.github.com/repos/okonet/webpack.io","forks_url":"https://api.github.com/repos/okonet/webpack.io/forks","keys_url":"https://api.github.com/repos/okonet/webpack.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/okonet/webpack.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/okonet/webpack.io/teams","hooks_url":"https://api.github.com/repos/okonet/webpack.io/hooks","issue_events_url":"https://api.github.com/repos/okonet/webpack.io/issues/events{/number}","events_url":"https://api.github.com/repos/okonet/webpack.io/events","assignees_url":"https://api.github.com/repos/okonet/webpack.io/assignees{/user}","branches_url":"https://api.github.com/repos/okonet/webpack.io/branches{/branch}","tags_url":"https://api.github.com/repos/okonet/webpack.io/tags","blobs_url":"https://api.github.com/repos/okonet/webpack.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/okonet/webpack.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/okonet/webpack.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/okonet/webpack.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/okonet/webpack.io/statuses/{sha}","languages_url":"https://api.github.com/repos/okonet/webpack.io/languages","stargazers_url":"https://api.github.com/repos/okonet/webpack.io/stargazers","contributors_url":"https://api.github.com/repos/okonet/webpack.io/contributors","subscribers_url":"https://api.github.com/repos/okonet/webpack.io/subscribers","subscription_url":"https://api.github.com/repos/okonet/webpack.io/subscription","commits_url":"https://api.github.com/repos/okonet/webpack.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/okonet/webpack.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/okonet/webpack.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/okonet/webpack.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/okonet/webpack.io/contents/{+path}","compare_url":"https://api.github.com/repos/okonet/webpack.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/okonet/webpack.io/merges","archive_url":"https://api.github.com/repos/okonet/webpack.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/okonet/webpack.io/downloads","issues_url":"https://api.github.com/repos/okonet/webpack.io/issues{/number}","pulls_url":"https://api.github.com/repos/okonet/webpack.io/pulls{/number}","milestones_url":"https://api.github.com/repos/okonet/webpack.io/milestones{/number}","notifications_url":"https://api.github.com/repos/okonet/webpack.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/okonet/webpack.io/labels{/name}","releases_url":"https://api.github.com/repos/okonet/webpack.io/releases{/id}","deployments_url":"https://api.github.com/repos/okonet/webpack.io/deployments","created_at":"2016-08-25T10:13:05Z","updated_at":"2016-08-25T10:13:06Z","pushed_at":"2016-08-25T12:40:41Z","git_url":"git://github.com/okonet/webpack.io.git","ssh_url":"git@github.com:okonet/webpack.io.git","clone_url":"https://github.com/okonet/webpack.io.git","svn_url":"https://github.com/okonet/webpack.io","homepage":"","size":609,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"develop"}},"base":{"label":"webpack:develop","ref":"develop","sha":"5a2e228d657681624c04a4bae4586cc96fd8b4ea","user":{"login":"webpack","id":2105791,"avatar_url":"https://avatars.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.io","full_name":"webpack/webpack.io","owner":{"login":"webpack","id":2105791,"avatar_url":"https://avatars.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.io","description":null,"fork":false,"url":"https://api.github.com/repos/webpack/webpack.io","forks_url":"https://api.github.com/repos/webpack/webpack.io/forks","keys_url":"https://api.github.com/repos/webpack/webpack.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/webpack/webpack.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/webpack/webpack.io/teams","hooks_url":"https://api.github.com/repos/webpack/webpack.io/hooks","issue_events_url":"https://api.github.com/repos/webpack/webpack.io/issues/events{/number}","events_url":"https://api.github.com/repos/webpack/webpack.io/events","assignees_url":"https://api.github.com/repos/webpack/webpack.io/assignees{/user}","branches_url":"https://api.github.com/repos/webpack/webpack.io/branches{/branch}","tags_url":"https://api.github.com/repos/webpack/webpack.io/tags","blobs_url":"https://api.github.com/repos/webpack/webpack.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/webpack/webpack.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/webpack/webpack.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/webpack/webpack.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/webpack/webpack.io/statuses/{sha}","languages_url":"https://api.github.com/repos/webpack/webpack.io/languages","stargazers_url":"https://api.github.com/repos/webpack/webpack.io/stargazers","contributors_url":"https://api.github.com/repos/webpack/webpack.io/contributors","subscribers_url":"https://api.github.com/repos/webpack/webpack.io/subscribers","subscription_url":"https://api.github.com/repos/webpack/webpack.io/subscription","commits_url":"https://api.github.com/repos/webpack/webpack.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/webpack/webpack.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/webpack/webpack.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/webpack/webpack.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/webpack/webpack.io/contents/{+path}","compare_url":"https://api.github.com/repos/webpack/webpack.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/webpack/webpack.io/merges","archive_url":"https://api.github.com/repos/webpack/webpack.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/webpack/webpack.io/downloads","issues_url":"https://api.github.com/repos/webpack/webpack.io/issues{/number}","pulls_url":"https://api.github.com/repos/webpack/webpack.io/pulls{/number}","milestones_url":"https://api.github.com/repos/webpack/webpack.io/milestones{/number}","notifications_url":"https://api.github.com/repos/webpack/webpack.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/webpack/webpack.io/labels{/name}","releases_url":"https://api.github.com/repos/webpack/webpack.io/releases{/id}","deployments_url":"https://api.github.com/repos/webpack/webpack.io/deployments","created_at":"2016-06-24T13:22:52Z","updated_at":"2016-08-23T05:26:47Z","pushed_at":"2016-08-25T12:41:15Z","git_url":"git://github.com/webpack/webpack.io.git","ssh_url":"git@github.com:webpack/webpack.io.git","clone_url":"https://github.com/webpack/webpack.io.git","svn_url":"https://github.com/webpack/webpack.io","homepage":"","size":609,"stargazers_count":82,"watchers_count":82,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":19,"mirror_url":null,"open_issues_count":47,"forks":19,"open_issues":47,"watchers":82,"default_branch":"develop"}},"_links":{"self":{"href":"https://api.github.com/repos/webpack/webpack.io/pulls/75"},"html":{"href":"https://github.com/webpack/webpack.io/pull/75"},"issue":{"href":"https://api.github.com/repos/webpack/webpack.io/issues/75"},"comments":{"href":"https://api.github.com/repos/webpack/webpack.io/issues/75/comments"},"review_comments":{"href":"https://api.github.com/repos/webpack/webpack.io/pulls/75/comments"},"review_comment":{"href":"https://api.github.com/repos/webpack/webpack.io/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/webpack/webpack.io/pulls/75/commits"},"statuses":{"href":"https://api.github.com/repos/webpack/webpack.io/statuses/c4d390c86024d9f7263bfca2e2fada9764a89b10"}}}}
{"actor":{"display_login":"TheLarkInn"}}