Exclude olm from the webpack
Olm takes *ages* to webpack, and it doesn't compress well. So, serve it as a separate asset to the browser.
This commit is contained in:
Richard van der Hoff
parent
2829d95705
commit
51b74251f9
4 changed files with 39 additions and 24 deletions
14
package.json
14
package.json
|
|
@ -17,16 +17,17 @@
|
|||
"build:compile": "babel --source-maps -d lib src",
|
||||
"build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
|
||||
"build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
|
||||
"build": "npm run build:css && npm run build:compile && npm run build:bundle",
|
||||
"build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
|
||||
"build:staticfiles": "scripts/staticfiles.js",
|
||||
"build": "npm run build:staticfiles && npm run build:css && npm run build:compile && npm run build:bundle",
|
||||
"build:dev": "npm run build:staticfiles && npm run build:css && npm run build:compile && npm run build:bundle:dev",
|
||||
"package": "scripts/package.sh",
|
||||
"start:js": "webpack -w src/vector/index.js vector/bundle.js",
|
||||
"start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js",
|
||||
"start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
|
||||
"//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
|
||||
"start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
||||
"start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
||||
"clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
|
||||
"start": "parallelshell \"npm run build:staticfiles\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
||||
"start:prod": "parallelshell \"npm run build:staticfiles\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
|
||||
"clean": "rimraf lib vector/olm.js vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
|
||||
"prepublish": "npm run build:css && npm run build:compile",
|
||||
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
|
||||
"test:multi": "karma start"
|
||||
|
|
@ -61,6 +62,7 @@
|
|||
"catw": "^1.0.1",
|
||||
"css-raw-loader": "^0.1.1",
|
||||
"expect": "^1.16.0",
|
||||
"fs-extra": "^0.30.0",
|
||||
"http-server": "^0.8.4",
|
||||
"json-loader": "^0.5.3",
|
||||
"karma": "^0.13.22",
|
||||
|
|
@ -74,8 +76,8 @@
|
|||
"mocha": "^2.4.5",
|
||||
"parallelshell": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.7",
|
||||
"react-addons-test-utils": "^15.0.1",
|
||||
"react-addons-perf": "^15.0",
|
||||
"react-addons-test-utils": "^15.0.1",
|
||||
"rimraf": "^2.4.3",
|
||||
"source-map-loader": "^0.1.5",
|
||||
"webpack": "^1.12.14"
|
||||
|
|
|
|||
21
scripts/staticfiles.js
Executable file
21
scripts/staticfiles.js
Executable file
|
|
@ -0,0 +1,21 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
// copy static files from node_modules to the vector directory
|
||||
//
|
||||
|
||||
var fs = require('fs-extra');
|
||||
|
||||
function exists(f) {
|
||||
try {
|
||||
fs.statSync(f);
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const olm = 'node_modules/olm/olm.js';
|
||||
if (exists(olm)) {
|
||||
console.log("copy", olm, "-> vector");
|
||||
fs.copySync(olm, 'vector/olm.js');
|
||||
}
|
||||
|
|
@ -24,6 +24,8 @@
|
|||
</head>
|
||||
<body style="height: 100%;">
|
||||
<section id="matrixchat" style="height: 100%;"></section>
|
||||
<!-- load olm, if possible. -->
|
||||
<script src="olm.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
<noscript>Sorry, Vector requires JavaScript to be enabled.</noscript>
|
||||
<link rel="stylesheet" href="bundle.css">
|
||||
|
|
|
|||
|
|
@ -43,12 +43,16 @@ module.exports = {
|
|||
|
||||
// same goes for js-sdk
|
||||
"matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
|
||||
|
||||
// make sure we use the version of olm from vector-web rather than
|
||||
// js-sdk.
|
||||
"olm": path.resolve('./node_modules/olm'),
|
||||
},
|
||||
},
|
||||
externals: {
|
||||
// olm takes ages for webpack to process, and it's already heavily
|
||||
// optimised, so there is little to gain by us uglifying it. We
|
||||
// therefore use it via a separate <script/> tag in index.html (which
|
||||
// loads it into the browser global `Olm`), and reference it as an
|
||||
// external here.
|
||||
"olm": "Olm",
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
|
|
@ -59,20 +63,6 @@ module.exports = {
|
|||
new ExtractTextPlugin("bundle.css", {
|
||||
allChunks: true
|
||||
}),
|
||||
|
||||
// olm.js includes "require 'fs'", which is never
|
||||
// executed in the browser. Ignore it.
|
||||
new webpack.IgnorePlugin(/^fs$/, /\/olm$/)
|
||||
],
|
||||
devtool: 'source-map'
|
||||
};
|
||||
|
||||
// ignore olm.js if it's not installed, to avoid a scary-looking error.
|
||||
try {
|
||||
require('olm');
|
||||
console.log("Olm is installed; including it in webpack bundle");
|
||||
} catch (e) {
|
||||
module.exports.plugins.push(
|
||||
new webpack.IgnorePlugin(/^olm$/)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue