mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 18:25:49 +03:00
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.
This commit is contained in:
Richard van der Hoff
parent
53e5894759
commit
6396c60645
4 changed files with 32 additions and 10 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -8,6 +8,7 @@
|
||||||
/vector/bundle.*
|
/vector/bundle.*
|
||||||
/vector/emojione/
|
/vector/emojione/
|
||||||
/vector/config.json
|
/vector/config.json
|
||||||
|
/vector/index.html
|
||||||
/vector/olm.*
|
/vector/olm.*
|
||||||
.DS_Store
|
.DS_Store
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
|
||||||
|
|
@ -22,13 +22,13 @@
|
||||||
"build:dev": "npm run build:emojione && npm run build:css && npm run build:bundle:dev",
|
"build:dev": "npm run build:emojione && npm run build:css && npm run build:bundle:dev",
|
||||||
"package": "scripts/package.sh",
|
"package": "scripts/package.sh",
|
||||||
"start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
|
"start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
|
||||||
"start:js": "webpack -w --progress",
|
"start:js": "webpack -w --progress --no-cache-buster",
|
||||||
"start:js:prod": "NODE_ENV=production webpack -w --progress",
|
"start:js:prod": "NODE_ENV=production webpack -w --progress --no-cache-buster",
|
||||||
"start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
|
"start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
|
||||||
"//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
|
"//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
|
||||||
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
||||||
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
||||||
"clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione",
|
"clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione vector/index.html",
|
||||||
"prepublish": "npm run build:css && npm run build:compile",
|
"prepublish": "npm run build:css && npm run build:compile",
|
||||||
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
|
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
|
||||||
"test:multi": "karma start"
|
"test:multi": "karma start"
|
||||||
|
|
@ -80,6 +80,7 @@
|
||||||
"emojione": "^2.2.3",
|
"emojione": "^2.2.3",
|
||||||
"expect": "^1.16.0",
|
"expect": "^1.16.0",
|
||||||
"fs-extra": "^0.30.0",
|
"fs-extra": "^0.30.0",
|
||||||
|
"html-webpack-plugin": "^2.24.0",
|
||||||
"http-server": "^0.8.4",
|
"http-server": "^0.8.4",
|
||||||
"json-loader": "^0.5.3",
|
"json-loader": "^0.5.3",
|
||||||
"karma": "^0.13.22",
|
"karma": "^0.13.22",
|
||||||
|
|
|
||||||
|
|
@ -20,14 +20,16 @@
|
||||||
<meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
|
<meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
|
||||||
<meta name="msapplication-config" content="vector-icons/browserconfig.xml">
|
<meta name="msapplication-config" content="vector-icons/browserconfig.xml">
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
<% for(var i=0; i<htmlWebpackPlugin.files.css.length; i++) {%>
|
||||||
|
<link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet">
|
||||||
|
<% } %>
|
||||||
</head>
|
</head>
|
||||||
<body style="height: 100%;">
|
<body style="height: 100%;">
|
||||||
<section id="matrixchat" style="height: 100%;"></section>
|
<section id="matrixchat" style="height: 100%;"></section>
|
||||||
<!-- load olm, if possible. -->
|
|
||||||
<script src="olm.js"></script>
|
|
||||||
<script src="bundle.js"></script>
|
|
||||||
<noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
|
<noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
|
||||||
<link rel="stylesheet" href="bundle.css">
|
<% for(var i=0; i<htmlWebpackPlugin.files.js.length; i++) {%>
|
||||||
|
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
|
||||||
|
<% } %>
|
||||||
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
||||||
<audio id="messageAudio">
|
<audio id="messageAudio">
|
||||||
<source src="media/message.ogg" type="audio/ogg" />
|
<source src="media/message.ogg" type="audio/ogg" />
|
||||||
|
|
@ -1,6 +1,16 @@
|
||||||
var path = require('path');
|
var path = require('path');
|
||||||
var webpack = require('webpack');
|
var webpack = require('webpack');
|
||||||
var ExtractTextPlugin = require("extract-text-webpack-plugin");
|
var ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||||
|
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
|
var cachebuster = true;
|
||||||
|
|
||||||
|
for (var i=0; i < process.argv.length; i++) {
|
||||||
|
var arg = process.argv[i];
|
||||||
|
if (arg == "--no-cache-buster") {
|
||||||
|
cachebuster = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
|
|
@ -39,7 +49,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: path.join(__dirname, "vector"),
|
path: path.join(__dirname, "vector"),
|
||||||
filename: "[name].js",
|
filename: "[name]" + (cachebuster ? ".[chunkhash]" : "") + ".js",
|
||||||
devtoolModuleFilenameTemplate: function(info) {
|
devtoolModuleFilenameTemplate: function(info) {
|
||||||
// Reading input source maps gives only relative paths here for
|
// Reading input source maps gives only relative paths here for
|
||||||
// everything. Until I figure out how to fix this, this is a
|
// everything. Until I figure out how to fix this, this is a
|
||||||
|
|
@ -73,8 +83,16 @@ module.exports = {
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
new ExtractTextPlugin("bundle.css", {
|
new ExtractTextPlugin(
|
||||||
allChunks: true
|
"[name]" + (cachebuster ? ".[contenthash]" : "") + ".css",
|
||||||
|
{
|
||||||
|
allChunks: true
|
||||||
|
}
|
||||||
|
),
|
||||||
|
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './src/vector/index.html',
|
||||||
|
inject: false, // we inject the links ourselves via the template
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
devtool: 'source-map'
|
devtool: 'source-map'
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue