From c26ee93d53a0b5fe6f20b03c1dbcee54f217cd2b Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 24 Apr 2017 23:18:15 +0200 Subject: [PATCH] Optimize production builds. Uses UglifyJS, and thus TypeScript needs to compile down to ES5, since UglifyJS does not yet fully support ES6. Once all ES6 bugs in UglifyJS, we should compile to ES6 again. --- gulpfile.js | 4 +- package.json | 25 +++--- tsconfig.json | 2 +- webpack.config.js | 195 ++++++++++++++++++---------------------------- yarn.lock | 19 ++++- 5 files changed, 107 insertions(+), 138 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 9841b5f75..e1897330b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -101,7 +101,7 @@ const paths = { const tsBaseArgs = { - target: "es6", + target: "es5", jsx: "react", reactNamespace: "React", experimentalDecorators: true, @@ -165,7 +165,7 @@ gulp.task("dist-prod", ["clean", "compile-prod"], function () { }); gulp.task("compile-prod", function (callback) { - let config = require("./webpack.config.js"); + let config = require("./webpack.config.js")({prod: true}); webpack(config, function(err, stats) { if(err) { throw new gutil.PluginError("webpack", err); diff --git a/package.json b/package.json index d750c3519..f6675834a 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,9 @@ "author": "", "license": "GPL-3.0", "devDependencies": { + "@types/react": "^15.0.22", + "@types/react-dom": "^15.5.0", + "async": "^2.1.2", "better-assert": "^1.0.2", "connect": "^3.5.0", "del": "^2.2.0", @@ -29,12 +32,16 @@ "gulp-tar": "^1.8.0", "gulp-typescript": "^3.0.2", "gulp-zip": "^3.1.0", + "html-webpack-plugin": "^2.28.0", "istanbul": "^0.4.5", "istanbul-lib-instrument": "^1.0.0-alpha.6", + "jed": "^1.1.1", "map-stream": "0.0.6", "minimist": "^1.2.0", "mocha": "^2.4.5", "po2json": "git+https://github.com/mikeedwards/po2json", + "react": "^15.5.4", + "react-dom": "^15.5.4", "selenium-webdriver": "^3.0.1", "serve-static": "^1.11.1", "systemjs": "^0.19.14", @@ -43,19 +50,11 @@ "ts-loader": "^2.0.3", "typescript": "next", "typhonjs-istanbul-instrument-jspm": "^0.1.0", - "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony", - "vinyl": "^2.0.0", - "vinyl-fs": "^2.4.3" - }, - "dependencies": { - "@types/react": "^15.0.22", - "@types/react-dom": "^15.5.0", - "async": "^2.1.2", - "html-webpack-plugin": "^2.28.0", - "jed": "^1.1.1", - "react": "^15.5.4", - "react-dom": "^15.5.4", "urijs": "^1.18.10", - "webpack": "^2.4.1" + "vinyl": "^2.0.0", + "vinyl-fs": "^2.4.3", + "webpack": "^2.4.1", + "webpack-merge": "^4.1.0", + "uglify-js": "^2.8.22" } } diff --git a/tsconfig.json b/tsconfig.json index da19dba69..93c7fb120 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es6", + "target": "es5", "jsx": "react", "reactNamespace": "React", "experimentalDecorators": true, diff --git a/webpack.config.js b/webpack.config.js index 4a4948668..e1915535a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,124 +1,79 @@ const path = require('path'); const webpack = require('webpack'); +const merge = require('webpack-merge'); -const configWebWorker = { - entry: {"cryptoWorker": "./src/cryptoWorker.ts"}, - target: "webworker", - output: { - filename: '[name]-bundle.js', - chunkFilename: "[id].chunk.js", - path: path.resolve(__dirname, "dist") - }, - module: { - noParse: /taler-emscripten-lib/, - rules: [ - { - test: /\.tsx?$/, - loader: 'ts-loader', - exclude: /node_modules/, - exclude: /taler-emscripten-lib/, - } - ] - }, - externals: { - // A big hack to load taler-emscripten-lib from the environment, - // because we exclude it from the bundle. - "./emscripten/taler-emscripten-lib": "(self.TalerEmscriptenLib = {}, importScripts('/src/emscripten/taler-emscripten-lib.js'), TalerEmscriptenLib)", - }, - resolve: { - modules: [path.resolve(__dirname, "./"), "node_modules"], - extensions: [".tsx", ".ts", ".js"] - }, - devtool: "source-map", + +module.exports = function (env) { + const base = { + output: { + filename: '[name]-bundle.js', + chunkFilename: "[id].chunk.js", + path: path.resolve(__dirname, "dist") + }, + module: { + noParse: /taler-emscripten-lib/, + rules: [ + { + test: /\.tsx?$/, + loader: 'ts-loader', + exclude: /node_modules/, + exclude: /taler-emscripten-lib/, + } + ] + }, + resolve: { + modules: [path.resolve(__dirname, "./"), "node_modules"], + extensions: [".tsx", ".ts", ".js"] + }, + plugins: [], + devtool: "source-map", + } + if (env.prod) { + base.plugins.push(new webpack.optimize.UglifyJsPlugin()); + base.plugins.push(new webpack.LoaderOptionsPlugin({minimize: true})); + } + const configWebWorker = { + entry: {"cryptoWorker": "./src/cryptoWorker.ts"}, + target: "webworker", + externals: { + // A big hack to load taler-emscripten-lib from the environment, + // because we exclude it from the bundle. + "./emscripten/taler-emscripten-lib": "(self.TalerEmscriptenLib = {}, importScripts('/src/emscripten/taler-emscripten-lib.js'), TalerEmscriptenLib)", + }, + }; + + const configBackground = { + entry: {"background": "./src/background/background.ts"}, + }; + + const configContentScript = { + entry: {"contentScript": "./src/content_scripts/notify.ts"}, + }; + + const configExtensionPages = { + entry: { + "add-auditor": "./src/pages/add-auditor.tsx", + "auditors": "./src/pages/auditors.tsx", + "confirm-contract": "./src/pages/confirm-contract.tsx", + "confirm-create-reserve": "./src/pages/confirm-create-reserve.tsx", + "error": "./src/pages/error.tsx", + "logs": "./src/pages/logs.tsx", + "popup": "./src/pages/popup.tsx", + "show-db": "./src/pages/show-db.ts", + "tree": "./src/pages/tree.tsx", + }, + plugins: [ + new webpack.optimize.CommonsChunkPlugin({ + name: "page-common", + minChunks: 2, + }), + ], + }; + + return [ + merge(base, configBackground), + merge(base, configWebWorker), + merge(base, configExtensionPages), + merge(base, configContentScript) + ]; } - -const configContentScript = { - entry: {"contentScript": "./src/content_scripts/notify.ts"}, - output: { - filename: '[name]-bundle.js', - chunkFilename: "[id].chunk.js", - path: path.resolve(__dirname, "dist") - }, - module: { - noParse: /taler-emscripten-lib/, - rules: [ - { - test: /\.tsx?$/, - loader: 'ts-loader', - exclude: /node_modules/, - } - ] - }, - resolve: { - modules: [path.resolve(__dirname, "./"), "node_modules"], - extensions: [".tsx", ".ts", ".js"] - }, - devtool: "source-map", -} - -const configBackground = { - entry: {"background": "./src/background/background.ts"}, - output: { - filename: '[name]-bundle.js', - chunkFilename: "[id].chunk.js", - path: path.resolve(__dirname, "dist") - }, - module: { - rules: [ - { - test: /\.tsx?$/, - loader: 'ts-loader', - exclude: /node_modules/, - } - ] - }, - externals: /taler-emscripten-lib/, - resolve: { - modules: [path.resolve(__dirname, "./"), "node_modules"], - extensions: [".tsx", ".ts", ".js"] - }, - devtool: "source-map", -} - - -const configExtensionPages = { - entry: { - "add-auditor": "./src/pages/add-auditor.tsx", - "auditors": "./src/pages/auditors.tsx", - "confirm-contract": "./src/pages/confirm-contract.tsx", - "confirm-create-reserve": "./src/pages/confirm-create-reserve.tsx", - "error": "./src/pages/error.tsx", - "logs": "./src/pages/logs.tsx", - "popup": "./src/pages/popup.tsx", - "show-db": "./src/pages/show-db.ts", - "tree": "./src/pages/tree.tsx", - }, - output: { - filename: '[name]-bundle.js', - chunkFilename: "[id].chunk.js", - path: path.resolve(__dirname, "dist") - }, - module: { - rules: [ - { - test: /\.tsx?$/, - loader: 'ts-loader', - exclude: /node_modules/, - } - ] - }, - resolve: { - modules: [path.resolve(__dirname, "./"), "node_modules"], - extensions: [".tsx", ".ts", ".js"] - }, - plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: "page-common", - minChunks: 2, - }), - ], - devtool: "source-map", -} - - -module.exports = [configBackground, configWebWorker, configContentScript, configExtensionPages]; diff --git a/yarn.lock b/yarn.lock index ec86a35c0..b334da648 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2371,7 +2371,7 @@ lodash.values@~2.4.1: dependencies: lodash.keys "~2.4.1" -lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.8.0: +lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.8.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -3673,7 +3673,7 @@ ua-parser-js@^0.7.9: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" -uglify-js@^2.6, uglify-js@^2.8.5, "uglify-js@git://github.com/mishoo/UglifyJS2#harmony", uglify-js@~2.8.22: +uglify-js@^2.6, uglify-js@^2.8.5, uglify-js@~2.8.22: version "2.8.22" resolved "git://github.com/mishoo/UglifyJS2#278577f3cb75e72320564805ee91be63e5f9c806" dependencies: @@ -3682,6 +3682,15 @@ uglify-js@^2.6, uglify-js@^2.8.5, "uglify-js@git://github.com/mishoo/UglifyJS2#h optionalDependencies: uglify-to-browserify "~1.0.0" +uglify-js@^2.8.22: + version "2.8.22" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0" + dependencies: + source-map "~0.5.1" + yargs "~3.10.0" + optionalDependencies: + uglify-to-browserify "~1.0.0" + uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" @@ -3875,6 +3884,12 @@ watchpack@^1.3.1: chokidar "^1.4.3" graceful-fs "^4.1.2" +webpack-merge@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.0.tgz#6ad72223b3e0b837e531e4597c199f909361511e" + dependencies: + lodash "^4.17.4" + webpack-sources@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"