From da5f4a792c7da411b3605b6b537a66ca443df913 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Thu, 18 Oct 2018 23:47:17 -0230 Subject: [PATCH] Bundle some ui dependencies separately to limit the build size of ui.js --- app/home.html | 1 + app/notification.html | 1 + app/popup.html | 1 + gulpfile.js | 46 ++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 48 insertions(+), 1 deletion(-) diff --git a/app/home.html b/app/home.html index 4fad0f993..051133cf8 100644 --- a/app/home.html +++ b/app/home.html @@ -7,6 +7,7 @@
+ diff --git a/app/notification.html b/app/notification.html index 457ba7137..042ffa6b8 100644 --- a/app/notification.html +++ b/app/notification.html @@ -11,6 +11,7 @@
+ diff --git a/app/popup.html b/app/popup.html index 3acfd8c55..1ba0fda94 100644 --- a/app/popup.html +++ b/app/popup.html @@ -7,6 +7,7 @@
+ diff --git a/gulpfile.js b/gulpfile.js index 0a0e3b3d5..89e2a536f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -26,6 +26,16 @@ const pify = require('pify') const gulpMultiProcess = require('gulp-multi-process') const endOfStream = pify(require('end-of-stream')) +const packageJSON = require('./package.json') +const dependencies = Object.keys(packageJSON && packageJSON.dependencies || {}) +const materialUIDependencies = ['@material-ui/core'] +const reactDepenendencies = dependencies.filter(dep => dep.match(/react/)) + +const uiDependenciesToBundle = [ + ...materialUIDependencies, + ...reactDepenendencies, +] + function gulpParallel (...args) { return function spawnGulpChildProcess (cb) { return gulpMultiProcess(args, cb, true) @@ -279,11 +289,32 @@ const buildJsFiles = [ ] // bundle tasks +createTasksForBuildJsUIDeps({ dependenciesToBundle: uiDependenciesToBundle, filename: 'libs' }) createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true }) createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js' }) createTasksForBuildJsMascara({ taskPrefix: 'build:mascara:js' }) createTasksForBuildJsMascara({ taskPrefix: 'dev:mascara:js', devMode: true }) +function createTasksForBuildJsUIDeps ({ dependenciesToBundle, filename }) { + const destinations = browserPlatforms.map(platform => `./dist/${platform}`) + + const bundleTaskOpts = Object.assign({ + buildSourceMaps: true, + sourceMapDir: '../sourcemaps', + minifyBuild: true, + devMode: false, + }) + + gulp.task('build:extension:js:uideps', bundleTask(Object.assign({ + label: filename, + filename: `${filename}.js`, + destinations, + buildLib: true, + dependenciesToBundle: uiDependenciesToBundle, + }, bundleTaskOpts))) +} + + function createTasksForBuildJsExtension ({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) { // inpage must be built before all other scripts: const rootDir = './app/scripts' @@ -326,6 +357,7 @@ function createTasksForBuildJs ({ rootDir, taskPrefix, bundleTaskOpts, destinati label: jsFile, filename: `${jsFile}.js`, filepath: `${rootDir}/${jsFile}.js`, + externalDependencies: jsFile === 'ui' && !bundleTaskOpts.devMode && uiDependenciesToBundle, destinations, }, bundleTaskOpts))) }) @@ -402,6 +434,7 @@ gulp.task('build', 'clean', 'build:scss', gulpParallel( + 'build:extension:js:uideps', 'build:extension:js', 'build:mascara:js', 'copy' @@ -450,14 +483,25 @@ function zipTask (target) { function generateBundler (opts, performBundle) { const browserifyOpts = assign({}, watchify.args, { - entries: [opts.filepath], plugin: 'browserify-derequire', debug: opts.buildSourceMaps, fullPaths: opts.buildWithFullPaths, }) + if (!opts.buildLib) { + browserifyOpts['entries'] = [opts.filepath] + } + let bundler = browserify(browserifyOpts) + if (opts.buildLib) { + bundler = bundler.require(opts.dependenciesToBundle) + } + + if (opts.externalDependencies) { + bundler = bundler.external(opts.externalDependencies) + } + // inject variables into bundle bundler.transform(envify({ METAMASK_DEBUG: opts.devMode,