MetaMask / MetaMask/metamask-extension

Improve bundling of ui dependencies via gulp build

Open
#6,851 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-buildSystem contributor experience
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

In https://github.com/MetaMask/metamask-extension/pull/5547, we started bundling some front end dependencies separately from the rest of our UI code.

The purpose of this was to shrink the size of the largest file in our bundle.

There were two noted improvements in that PR.
- dynamically sourcing the list of dependencies or files to include in separate bundles
- dynamically inserting script tags into the appropriate *.html files

To complete the first, we need to dynamically source all files that should be in the bundle and then bundle them into a number of files of roughly equal size. Package names are currently hard-coded near the top of the gulp file.

To complete the second, we need to ensure that the `` line in `home.html`, `popup.html` and `notification.html` is only included in production build.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read PR 5547 and the gulp file, where the package names are currently hard-coded. Then inspect home.html, popup.html, and notification.html; done means dependencies are sourced dynamically into roughly equal bundles and the libs.js script is present only in production builds.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, typescript
Domain
build-system, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.