google / google/site-kit-wp

Optimize bundles to reduce the total assets size

Open
#4,610 7 comments 0 reactions 0 assignees View on GitHub
P2 Type: Infrastructure
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## Feature Description

We need to review our bundles to find an opportunity to reduce the total size of the generated assets. If we can shrink the total size down, it will let us include the development (non-minified) assets into the release that can be used with the `SCRIPT_DEBUG` mode.

We have the `npm run test:analyze` command that runs the bundle analyzer tool for the main assets. We need to use this tool to see which modules are included in bundles and find a way how to optimize them to take less space.

![127 0 0 1_8888_](https://user-images.githubusercontent.com/873049/147284467-8ce1df35-4cf5-4e54-aa3a-a0c7ca95505d.png)

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

- Investigate possible ways to reduce the size of the generated assets. Possible avenues include, but should not be limited to:
- There are numerous modules which are duplicated across many of the assets, for example React components, commonly used utilities like `./assets/js/util/i18n.js`, SVG files, and so forth. It should be possible to group some of these into one or more shared assets to reduce the duplication.
- Check for and apply efficient use of tree-shaking (or similar patterns). For example Lodash appears to be included in its full form and also in the individual module format, whereas only the individual modules should be included.
- Take a fresh look at the minification rules in webpack config.
- Create a new issue, or issues, in order to review and implement the findings.

## Implementation Brief

*

### Test Coverage

*

## QA Brief

*

## Changelog entry

*

Contributor guide

Open the contributing guide

Research direction

Run `npm run test:analyze` to inspect which modules are duplicated or unnecessarily included in the main generated assets. Review the webpack configuration and the analyzer output for shared assets, tree-shaking, Lodash usage, and minification; the investigation is done when concrete optimization findings are documented as new implementation issues.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.