Bundle some ui dependencies separately to limit the build size of ui.js

6 years ago · da5f4a792c
parent ac079365e6
commit da5f4a792c
4 changed files with 48 additions and 1 deletions
--- 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>
--- 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>
--- 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>
--- 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,