m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

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

Browse Source
This commit is contained in:
Dan Miller 2018-10-18 23:47:17 -02:30
parent ac079365e6
commit da5f4a792c
4 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/home.html
View File

@ -7,6 +7,7 @@
</head> </head>
<body> <body>
<div id="app-content"></div> <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> <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body> </body>
</html> </html>

1
app/notification.html
View File

@ -11,6 +11,7 @@
</head> </head>
<body class="notification" style="height:600px;"> <body class="notification" style="height:600px;">
<div id="app-content"></div> <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> <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body> </body>
</html> </html>

1
app/popup.html
View File

@ -7,6 +7,7 @@
</head> </head>
<body style="width:357px; height:600px;"> <body style="width:357px; height:600px;">
<div id="app-content"></div> <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> <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body> </body>
</html> </html>

46
gulpfile.js
View File

@ -26,6 +26,16 @@ const pify = require('pify')
const gulpMultiProcess = require('gulp-multi-process') const gulpMultiProcess = require('gulp-multi-process')
const endOfStream = pify(require('end-of-stream')) 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) { function gulpParallel (...args) {
return function spawnGulpChildProcess (cb) { return function spawnGulpChildProcess (cb) {
return gulpMultiProcess(args, cb, true) return gulpMultiProcess(args, cb, true)
@ -279,11 +289,32 @@ const buildJsFiles = [
] ]
// bundle tasks // bundle tasks
createTasksForBuildJsUIDeps({ dependenciesToBundle: uiDependenciesToBundle, filename: 'libs' })
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true }) createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true })
createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js' }) createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js' })
createTasksForBuildJsMascara({ taskPrefix: 'build:mascara:js' }) createTasksForBuildJsMascara({ taskPrefix: 'build:mascara:js' })
createTasksForBuildJsMascara({ taskPrefix: 'dev:mascara:js', devMode: true }) 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 = {} }) { function createTasksForBuildJsExtension ({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) {
// inpage must be built before all other scripts: // inpage must be built before all other scripts:
const rootDir = './app/scripts' const rootDir = './app/scripts'
@ -326,6 +357,7 @@ function createTasksForBuildJs ({ rootDir, taskPrefix, bundleTaskOpts, destinati
label: jsFile, label: jsFile,
filename: `${jsFile}.js`, filename: `${jsFile}.js`,
filepath: `${rootDir}/${jsFile}.js`, filepath: `${rootDir}/${jsFile}.js`,
externalDependencies: jsFile === 'ui' && !bundleTaskOpts.devMode && uiDependenciesToBundle,
destinations, destinations,
}, bundleTaskOpts))) }, bundleTaskOpts)))
}) })
@ -402,6 +434,7 @@ gulp.task('build',
'clean', 'clean',
'build:scss', 'build:scss',
gulpParallel( gulpParallel(
'build:extension:js:uideps',
'build:extension:js', 'build:extension:js',
'build:mascara:js', 'build:mascara:js',
'copy' 'copy'
@ -450,14 +483,25 @@ function zipTask (target) {
function generateBundler (opts, performBundle) { function generateBundler (opts, performBundle) {
const browserifyOpts = assign({}, watchify.args, { const browserifyOpts = assign({}, watchify.args, {
entries: [opts.filepath],
plugin: 'browserify-derequire', plugin: 'browserify-derequire',
debug: opts.buildSourceMaps, debug: opts.buildSourceMaps,
fullPaths: opts.buildWithFullPaths, fullPaths: opts.buildWithFullPaths,
}) })
if (!opts.buildLib) {
browserifyOpts['entries'] = [opts.filepath]
}
let bundler = browserify(browserifyOpts) let bundler = browserify(browserifyOpts)
if (opts.buildLib) {
bundler = bundler.require(opts.dependenciesToBundle)
}
if (opts.externalDependencies) {
bundler = bundler.external(opts.externalDependencies)
}
// inject variables into bundle // inject variables into bundle
bundler.transform(envify({ bundler.transform(envify({
METAMASK_DEBUG: opts.devMode, METAMASK_DEBUG: opts.devMode,