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.
6 years ago · 51b74251f9
4 changed files with 39 additions and 24 deletions
--- a/package.json
+++ b/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"
--- a/scripts/staticfiles.js
+++ b/scripts/staticfiles.js
@ -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');
+}
--- a/vector/index.html
+++ b/vector/index.html
@ -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">
--- a/webpack.config.js
+++ b/webpack.config.js
@ -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$/)
-    );
-}