diff options
| author | Dan J Miller <danjm.com@gmail.com> | 2018-11-08 01:01:56 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-11-08 01:01:56 +0800 |
| commit | 0dd0d8fc83db3695e5af6d3687a7648a04770201 (patch) | |
| tree | 31951c54ca10fcf57bfb50ae2dcd3e5fe7e81987 | |
| parent | 718393f89a1bf99ff15bdfe1aa5c4301fbd56621 (diff) | |
| parent | da5f4a792c7da411b3605b6b537a66ca443df913 (diff) | |
| download | tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.tar tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.tar.gz tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.tar.bz2 tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.tar.lz tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.tar.xz tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.tar.zst tangerine-wallet-browser-0dd0d8fc83db3695e5af6d3687a7648a04770201.zip | |
Merge pull request #5547 from MetaMask/front-ends-deps-gulp-bundle
Bundle some ui dependencies separately to limit the build size of ui.js
| -rw-r--r-- | app/home.html | 1 | ||||
| -rw-r--r-- | app/notification.html | 1 | ||||
| -rw-r--r-- | app/popup.html | 1 | ||||
| -rw-r--r-- | gulpfile.js | 46 |
4 files changed, 48 insertions, 1 deletions
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 @@ </head> <body> <div id="app-content"></div> + <script src="./libs.js" type="text/javascript" charset="utf-8"></script> <script src="./ui.js" type="text/javascript" charset="utf-8"></script> </body> </html> 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 @@ </head> <body class="notification" style="height:600px;"> <div id="app-content"></div> + <script src="./libs.js" type="text/javascript" charset="utf-8"></script> <script src="./ui.js" type="text/javascript" charset="utf-8"></script> </body> </html> 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 @@ </head> <body style="width:357px; height:600px;"> <div id="app-content"></div> + <script src="./libs.js" type="text/javascript" charset="utf-8"></script> <script src="./ui.js" type="text/javascript" charset="utf-8"></script> </body> </html> 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, |