Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: 14743 improve web app speed #17424

Closed
wants to merge 6 commits into from
Closed

WIP: 14743 improve web app speed #17424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9c66421
fix(suite): increase static files cache duration to 30 days
vojtatranta Mar 5, 2025
6d4cdaa
fix(suite-build): add PreloadWebpackPlugin to preload .js files neede…
vojtatranta Mar 5, 2025
9c9c2c7
wip: try to run main file on the web directly
vojtatranta Mar 6, 2025
aab281d
wip split chunks
vojtatranta Mar 6, 2025
31fa546
no defaul cache groups
vojtatranta Mar 6, 2025
f1af5fb
disable prefetch
vojtatranta Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/release-suite-desktop-web-staging.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ jobs:
- name: Upload suite-desktop to staging-data.trezor.io canary
# uploads the files to the staging bucket canary folder (canary does not have staging percentage set)
run: |
aws s3 sync --delete ./trezor-suite-files s3://staging-data.trezor.io/suite/releases/desktop/canary
aws s3 sync --delete ./trezor-suite-files s3://staging-data.trezor.io/suite/releases/desktop/canary --cache-control "max-age=2592000"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess these won't be the files....

It would be better to set cache control more granulary eg. for just particular js. files that include a specific string (are unique - generated with webpack with some proper content hash)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vdovhanych is the person who knows, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vdovhanych is the person who knows, right?


- name: Set staging percentage
working-directory:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/test-transport.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,4 @@ jobs:
echo "DEPLOY_PATH is set to ${DEPLOY_PATH}"
mkdir -p tmp_build_directory
cp -R ./packages/transport-test/e2e/dist/* tmp_build_directory/
aws s3 sync --delete tmp_build_directory/ "${DEPLOY_PATH}"
aws s3 sync --delete tmp_build_directory/ "${DEPLOY_PATH}" --cache-control "max-age=2592000"
8 changes: 8 additions & 0 deletions packages/suite-build/configs/analyze.webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import webpack from 'webpack';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

const config: webpack.Configuration = {
plugins: [new BundleAnalyzerPlugin()],
};

export default config;
64 changes: 29 additions & 35 deletions packages/suite-build/configs/base.webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
import path from 'path';
import TerserPlugin from 'terser-webpack-plugin';
import webpack from 'webpack';
Expand All @@ -8,16 +7,8 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import { WebpackSecurityCheckPlugin } from '@trezor/bundler-security';

import { suiteVersion } from '../../suite/package.json';
import {
assetPrefix,
isAnalyzing,
isCodesignBuild,
isDev,
project,
sentryAuthToken,
} from '../utils/env';
import { assetPrefix, isAnalyzing, isCodesignBuild, isDev, project } from '../utils/env';
import { getRevision } from '../utils/git';
import { getPathForProject } from '../utils/path';
const gitRevision = getRevision();

/**
Expand Down Expand Up @@ -63,21 +54,24 @@ const config: webpack.Configuration = {
optimization: {
splitChunks: {
cacheGroups: {
react: {
chunks: 'initial',
name: 'react',
test: /[\\/]node_modules[\\/]react/,
},
// react: {
// chunks: 'initial',
// name: 'react',
// test: /[\\/]node_modules[\\/]react/,
// priority: -10,
// },
vendors: {
chunks: 'initial',
name: 'vendors',
test: /[\\/]node_modules[\\/](?!react)/,
priority: -15,
},
components: {
chunks: 'initial',
name: 'components',
test: /[\\/]packages[\\/]components[\\/]/,
},
// components: {
// chunks: 'initial',
// name: 'components',
// test: /[\\/]packages[\\/]components[\\/]/,
// priority: -20,
// },
},
},
minimizer: [
Expand Down Expand Up @@ -184,21 +178,21 @@ const config: webpack.Configuration = {
}),
]
: []),
...(!isDev && sentryAuthToken
? [
sentryWebpackPlugin({
telemetry: false,
org: 'satoshilabs',
project: 'trezor-suite',
authToken: sentryAuthToken,
release: { name: sentryRelease, cleanArtifacts: true },
sourcemaps: {
assets: path.join(getPathForProject(project), 'build', '**'),
ignore: ['static/connect'], // connect does not contain source maps for now
},
}),
]
: []),
// ...(!isDev && sentryAuthToken
// ? [
// sentryWebpackPlugin({
// telemetry: false,
// org: 'satoshilabs',
// project: 'trezor-suite',
// authToken: sentryAuthToken,
// release: { name: sentryRelease, cleanArtifacts: true },
// sourcemaps: {
// assets: path.join(getPathForProject(project), 'build', '**'),
// ignore: ['static/connect'], // connect does not contain source maps for now
// },
// }),
// ]
// : []),
],
};

Expand Down
9 changes: 9 additions & 0 deletions packages/suite-build/configs/web.webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { FLAGS, routes } from '@suite-common/suite-config';
import { assetPrefix, isDev } from '../utils/env';
import { getPathForProject } from '../utils/path';

// const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');

const baseDir = getPathForProject('web');
const config: webpack.Configuration = {
target: 'browserslist',
Expand Down Expand Up @@ -74,6 +76,13 @@ const config: webpack.Configuration = {
/@trezor\/connect$/,
'@trezor/connect-web/src/module',
),
// new PreloadWebpackPlugin({
// rel: 'prefetch',
// include: 'asyncChunks',
// // NOTE: only prefetch js files
// fileWhitelist: [/\.js$/],
// fileBlacklist: [/_svg\.js$/, /date-fns/, /json\.js/, /suite-data/],
// }),
...(!isDev ? [new CssMinimizerPlugin()] : []),
],
};
Expand Down
1 change: 1 addition & 0 deletions packages/suite-build/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default [
'**/webpack/**',
'**/builds/**',
'**/configs/**',
'@vue/preload-webpack-plugin',
],
},
],
Expand Down
1 change: 1 addition & 0 deletions packages/suite-build/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@suite-common/suite-config": "workspace:*",
"@trezor/bundler-security": "workspace:*",
"@trezor/suite": "workspace:*",
"@vue/preload-webpack-plugin": "^2.0.0",
"babel-loader": "^9.1.3",
"babel-plugin-styled-components": "^2.1.4",
"copy-webpack-plugin": "^12.0.2",
Expand Down
7 changes: 3 additions & 4 deletions packages/suite-web/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@
* After the div is added, MutationObserver detects the change and adds React app to the DOM.
*/

import { init } from './Main';

const observer = new MutationObserver(() => {
const appElement = document.getElementById('app');
if (appElement) {
observer.disconnect();

import(/* webpackChunkName: "app" */ './Main')
.then(comp => comp.init(appElement))
.catch(err => console.error(err)); // Fatal error
init(appElement);
}
});

Expand Down
22 changes: 16 additions & 6 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12348,6 +12348,7 @@ __metadata:
"@types/node-fetch": "npm:^2.6.12"
"@types/webpack-bundle-analyzer": "npm:^4.7.0"
"@types/webpack-plugin-serve": "npm:^1.4.6"
"@vue/preload-webpack-plugin": "npm:^2.0.0"
babel-loader: "npm:^9.1.3"
babel-plugin-styled-components: "npm:^2.1.4"
copy-webpack-plugin: "npm:^12.0.2"
Expand All @@ -12362,7 +12363,7 @@ __metadata:
terser-webpack-plugin: "npm:^5.3.11"
vm-browserify: "npm:^1.1.2"
webpack: "npm:^5.97.1"
webpack-bundle-analyzer: "npm:^4.10.1"
webpack-bundle-analyzer: "npm:^4.10.2"
webpack-merge: "npm:^6.0.1"
webpack-nano: "npm:^1.1.1"
webpack-plugin-serve: "npm:^1.6.0"
Expand Down Expand Up @@ -14734,6 +14735,16 @@ __metadata:
languageName: node
linkType: hard

"@vue/preload-webpack-plugin@npm:^2.0.0":
version: 2.0.0
resolution: "@vue/preload-webpack-plugin@npm:2.0.0"
peerDependencies:
html-webpack-plugin: ^5.0.0 || ^4.5.1
webpack: ^5.20.0 || ^4.1.0
checksum: 10/ddaf1542b2cdece5619eb836c96cc177153b8b1a55833d279358d7042d869e916b461e0fc7e8372504a479b8b8c135885b10738bb9a241c5ae542099deef6341
languageName: node
linkType: hard

"@vue/shared@npm:3.4.27":
version: 3.4.27
resolution: "@vue/shared@npm:3.4.27"
Expand Down Expand Up @@ -43100,9 +43111,9 @@ __metadata:
languageName: node
linkType: hard

"webpack-bundle-analyzer@npm:^4.10.1":
version: 4.10.1
resolution: "webpack-bundle-analyzer@npm:4.10.1"
"webpack-bundle-analyzer@npm:^4.10.2":
version: 4.10.2
resolution: "webpack-bundle-analyzer@npm:4.10.2"
dependencies:
"@discoveryjs/json-ext": "npm:0.5.7"
acorn: "npm:^8.0.4"
Expand All @@ -43112,14 +43123,13 @@ __metadata:
escape-string-regexp: "npm:^4.0.0"
gzip-size: "npm:^6.0.0"
html-escaper: "npm:^2.0.2"
is-plain-object: "npm:^5.0.0"
opener: "npm:^1.5.2"
picocolors: "npm:^1.0.0"
sirv: "npm:^2.0.3"
ws: "npm:^7.3.1"
bin:
webpack-bundle-analyzer: lib/bin/analyzer.js
checksum: 10/bc7bc2c014ba36dfb3f28ef75e3bb4be17ebff092ae713a30392a1d578a73b5d83ed0940b9d12eca6b06e514218d8a1e7cb0610f0b4d74b53425be3f0cc3aea8
checksum: 10/cb7ff9d01dc04ef23634f439ab9fe739e022cce5595cb340e01d106ed474605ce4ef50b11b47e444507d341b16650dcb3610e88944020ca6c1c38e88072d43ba
languageName: node
linkType: hard

Expand Down
Loading