Skip to content

Commit 6396c60

Browse files
richvdhrichvdh
committed
Put a cachebuster in the names of CSS and JS files
This means that clients can do better caching of assets, as it will mean we are no longer reliant on etags to ensure that clients get a fresh version. We inhibit the cachebuster for `npm start`, so that we don't get millions of copies of the bundles on dev boxes.
1 parent 53e5894 commit 6396c60

4 files changed

Lines changed: 32 additions & 10 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
/vector/bundle.*
99
/vector/emojione/
1010
/vector/config.json
11+
/vector/index.html
1112
/vector/olm.*
1213
.DS_Store
1314
npm-debug.log

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
"build:dev": "npm run build:emojione && npm run build:css && npm run build:bundle:dev",
2323
"package": "scripts/package.sh",
2424
"start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
25-
"start:js": "webpack -w --progress",
26-
"start:js:prod": "NODE_ENV=production webpack -w --progress",
25+
"start:js": "webpack -w --progress --no-cache-buster",
26+
"start:js:prod": "NODE_ENV=production webpack -w --progress --no-cache-buster",
2727
"start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
2828
"//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
2929
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
3030
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
31-
"clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione",
31+
"clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione vector/index.html",
3232
"prepublish": "npm run build:css && npm run build:compile",
3333
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
3434
"test:multi": "karma start"
@@ -80,6 +80,7 @@
8080
"emojione": "^2.2.3",
8181
"expect": "^1.16.0",
8282
"fs-extra": "^0.30.0",
83+
"html-webpack-plugin": "^2.24.0",
8384
"http-server": "^0.8.4",
8485
"json-loader": "^0.5.3",
8586
"karma": "^0.13.22",

vector/index.html renamed to src/vector/index.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,16 @@
2020
<meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
2121
<meta name="msapplication-config" content="vector-icons/browserconfig.xml">
2222
<meta name="theme-color" content="#ffffff">
23+
<% for(var i=0; i<htmlWebpackPlugin.files.css.length; i++) {%>
24+
<link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet">
25+
<% } %>
2326
</head>
2427
<body style="height: 100%;">
2528
<section id="matrixchat" style="height: 100%;"></section>
26-
<!-- load olm, if possible. -->
27-
<script src="olm.js"></script>
28-
<script src="bundle.js"></script>
2929
<noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
30-
<link rel="stylesheet" href="bundle.css">
30+
<% for(var i=0; i<htmlWebpackPlugin.files.js.length; i++) {%>
31+
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
32+
<% } %>
3133
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
3234
<audio id="messageAudio">
3335
<source src="media/message.ogg" type="audio/ogg" />

‎webpack.config.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
var path = require('path');
22
var webpack = require('webpack');
33
var ExtractTextPlugin = require("extract-text-webpack-plugin");
4+
var HtmlWebpackPlugin = require('html-webpack-plugin');
5+
6+
var cachebuster = true;
7+
8+
for (var i=0; i < process.argv.length; i++) {
9+
var arg = process.argv[i];
10+
if (arg == "--no-cache-buster") {
11+
cachebuster = false;
12+
}
13+
}
414

515
module.exports = {
616
entry: {
@@ -39,7 +49,7 @@ module.exports = {
3949
},
4050
output: {
4151
path: path.join(__dirname, "vector"),
42-
filename: "[name].js",
52+
filename: "[name]" + (cachebuster ? ".[chunkhash]" : "") + ".js",
4353
devtoolModuleFilenameTemplate: function(info) {
4454
// Reading input source maps gives only relative paths here for
4555
// everything. Until I figure out how to fix this, this is a
@@ -73,8 +83,16 @@ module.exports = {
7383
}
7484
}),
7585

76-
new ExtractTextPlugin("bundle.css", {
77-
allChunks: true
86+
new ExtractTextPlugin(
87+
"[name]" + (cachebuster ? ".[contenthash]" : "") + ".css",
88+
{
89+
allChunks: true
90+
}
91+
),
92+
93+
new HtmlWebpackPlugin({
94+
template: './src/vector/index.html',
95+
inject: false, // we inject the links ourselves via the template
7896
}),
7997
],
8098
devtool: 'source-map'

0 commit comments

Comments
 (0)