Skip to content

Commit 73dd30b

Browse files
pczeglik-iohkpczeglik-iohk
committed
chore: rework webpack config for code splitting
1 parent 25da0b0 commit 73dd30b

17 files changed

+351
-130
lines changed

‎apps/browser-extension-wallet/manifest.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"128": "icon128.png"
1111
},
1212
"background": {
13-
"service_worker": "./js/background.js"
13+
"service_worker": "./sw/background.js"
1414
},
1515
"action": {
1616
"default_popup": "popup.html"
@@ -23,26 +23,26 @@
2323
"content_scripts": [
2424
{
2525
"matches": ["http://*/*", "https://*/*", "file://*/*"],
26-
"js": ["./js/inject.js"],
26+
"js": ["./sw/inject.js"],
2727
"run_at": "document_start",
2828
"world": "MAIN",
2929
"all_frames": true
3030
},
3131
{
3232
"matches": ["http://*/*", "https://*/*", "file://*/*"],
33-
"js": ["./js/content.js"],
33+
"js": ["./sw/content.js"],
3434
"run_at": "document_start",
3535
"all_frames": true
3636
},
3737
{
3838
"matches": ["*://connect.trezor.io/*/popup.html*"],
39-
"js": ["js/trezor-content-script.js"],
39+
"js": ["./app/trezor-content-script.js"],
4040
"all_frames": true
4141
}
4242
],
4343
"web_accessible_resources": [
4444
{
45-
"resources": ["/js/inject.js"],
45+
"resources": ["/sw/inject.js", "/sw/*.js"],
4646
"matches": ["<all_urls>"]
4747
}
4848
]

‎apps/browser-extension-wallet/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@
122122
"@types/text-encoding-utf-8": "^1",
123123
"@types/w3c-web-hid": "^1.0.3",
124124
"@types/webextension-polyfill": "0.10.0",
125+
"@types/webpack-bundle-analyzer": "^4",
125126
"dotenv-defaults": "5.0.2",
126127
"dotenv-webpack": "8.0.1",
127128
"eslint-plugin-prettier": "^4.0.0",
@@ -132,6 +133,7 @@
132133
"text-encoding-utf-8": "^1.0.2",
133134
"tsconfig-paths-webpack-plugin": "3.5.2",
134135
"web-ext": "^8.2.0",
135-
"webassembly-loader-sw": "^1.1.0"
136+
"webassembly-loader-sw": "^1.1.0",
137+
"webpack-bundle-analyzer": "^4.10.2"
136138
}
137139
}

‎apps/browser-extension-wallet/src/assets/html/app.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
88
<link rel="stylesheet" href="https://use.typekit.net/ksk5ywd.css" />
9-
<link rel="stylesheet" href="preloader.css" />
9+
<link rel="stylesheet" href="assets/preloader.css" />
1010
<style>
1111
html,
1212
head,
@@ -17,13 +17,13 @@
1717
height: 100vh;
1818
}
1919
</style>
20-
<script src="js/load-app.js"></script>
20+
<script src="app/load-app.js"></script>
2121
<title>Lace</title>
2222
</head>
2323
<body>
2424
<div id="preloader" class="overlay loaderContainer" data-testid="preloader">
2525
<div class="imageContainer">
26-
<img alt="loader" src="loader.png" class="loaderImage" data-testid="preloader-image" />
26+
<img alt="loader" src="assets/loader.png" class="loaderImage" data-testid="preloader-image" />
2727
</div>
2828
<p class="loaderText" data-testid="preloader-text">Loading...</p>
2929
</div>

‎apps/browser-extension-wallet/src/assets/html/dappConnector.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="stylesheet" href="https://use.typekit.net/ksk5ywd.css" />
99

1010
<title>Lace</title>
11-
<link rel="stylesheet" href="preloader.css" />
11+
<link rel="stylesheet" href="assets/preloader.css" />
1212
<style>
1313
html,
1414
head,
@@ -19,12 +19,12 @@
1919
padding: 0;
2020
}
2121
</style>
22-
<script src="js/load-dapp-connector.js"></script>
22+
<script src="app/load-dapp-connector.js"></script>
2323
</head>
2424
<body id="lace-popup-body">
2525
<div id="preloader" class="overlay loaderContainer" data-testid="preloader">
2626
<div class="imageContainer">
27-
<img alt="loader" src="loader.png" class="loaderImage" data-testid="preloader-image" />
27+
<img alt="loader" src="assets/loader.png" class="loaderImage" data-testid="preloader-image" />
2828
</div>
2929
<p class="loaderText" data-testid="preloader-text">Loading...</p>
3030
</div>

‎apps/browser-extension-wallet/src/assets/html/load-app.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
window.addEventListener(
22
'load',
33
() => {
4+
const vendors = document.createElement('script');
5+
vendors.setAttribute('src', 'app/vendors.js');
6+
document.head.appendChild(vendors);
7+
48
const script = document.createElement('script');
5-
script.setAttribute('src', 'js/options.js');
9+
script.setAttribute('src', 'app/options.js');
610
document.head.appendChild(script);
711
},
812
{ once: true }

‎apps/browser-extension-wallet/src/assets/html/load-dapp-connector.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
window.addEventListener(
22
'load',
33
() => {
4+
const vendors = document.createElement('script');
5+
vendors.setAttribute('src', 'app/vendors.js');
6+
document.head.appendChild(vendors);
7+
48
const script = document.createElement('script');
5-
script.setAttribute('src', 'js/dappConnector.js');
9+
script.setAttribute('src', 'app/dappConnector.js');
610
document.head.appendChild(script);
711
},
812
{ once: true }

‎apps/browser-extension-wallet/src/assets/html/load-popup.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
window.addEventListener(
22
'load',
33
() => {
4+
const vendors = document.createElement('script');
5+
vendors.setAttribute('src', 'app/vendors.js');
6+
document.head.appendChild(vendors);
7+
48
const script = document.createElement('script');
5-
script.setAttribute('src', 'js/popup.js');
9+
script.setAttribute('src', 'app/popup.js');
610
document.head.appendChild(script);
711
},
812
{ once: true }

‎apps/browser-extension-wallet/src/assets/html/popup.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="stylesheet" href="https://use.typekit.net/ksk5ywd.css" />
99

1010
<title>Lace</title>
11-
<link rel="stylesheet" href="preloader.css" />
11+
<link rel="stylesheet" href="assets/preloader.css" />
1212
<style>
1313
html,
1414
head,
@@ -19,12 +19,12 @@
1919
padding: 0;
2020
}
2121
</style>
22-
<script src="js/load-popup.js"></script>
22+
<script src="app/load-popup.js"></script>
2323
</head>
2424
<body id="lace-popup-body">
2525
<div id="preloader" class="overlay loaderContainer" data-testid="preloader">
2626
<div class="imageContainer">
27-
<img alt="loader" src="loader.png" class="loaderImage" data-testid="preloader-image" />
27+
<img alt="loader" src="assets/loader.png" class="loaderImage" data-testid="preloader-image" />
2828
</div>
2929
<p class="loaderText" data-testid="preloader-text">Loading...</p>
3030
</div>

‎apps/browser-extension-wallet/src/assets/html/trezor-usb-permissions.html

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
66
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
@@ -14,19 +14,21 @@
1414
<meta http-equiv="Pragma" content="no-cache" />
1515
<meta http-equiv="Expires" content="-1" />
1616
<style>
17-
* {
18-
margin: 0;
19-
padding: 0;
20-
}
21-
html, body {
22-
position: relative;
23-
width: 100%;
24-
height: 100%;
25-
min-height: 500px;
26-
min-width: 328px;
27-
}
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
}
21+
html,
22+
body {
23+
position: relative;
24+
width: 100%;
25+
height: 100%;
26+
min-height: 500px;
27+
min-width: 328px;
28+
}
2829
</style>
29-
</head>
30-
<body>
31-
<script type="text/javascript" src="./js/trezor-usb-permissions.js"></script>
32-
</body>
30+
</head>
31+
<body>
32+
<script type="text/javascript" src="./app/trezor-usb-permissions.js"></script>
33+
</body>
34+
</html>

‎apps/browser-extension-wallet/src/lib/scripts/background/index-sw.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
self.importScripts('cardano-sdk.js', 'vendors.js');
2+
import('./index');

‎apps/browser-extension-wallet/webpack.app.prod.js

+73-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
const TerserPlugin = require('terser-webpack-plugin');
12
const { merge } = require('webpack-merge');
3+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
24

35
const commonProdConfig = require('./webpack.common.prod');
46
const commonAppConfig = require('./webpack.common.app');
@@ -9,4 +11,74 @@ require('dotenv-defaults').config({
911
defaults: process.env.BUILD_DEV_PREVIEW === 'true' ? './.env.developerpreview' : './.env.defaults'
1012
});
1113

12-
module.exports = () => merge(commonProdConfig(), commonAppConfig());
14+
module.exports = () =>
15+
merge(commonProdConfig(), commonAppConfig(), {
16+
optimization: {
17+
mangleExports: false,
18+
minimize: true,
19+
moduleIds: 'named',
20+
splitChunks: {
21+
maxSize: 3000000,
22+
cacheGroups: {
23+
vendors: {
24+
test: /[/\\]node_modules[/\\]/,
25+
name: () => 'vendors',
26+
enforce: true,
27+
priority: -20,
28+
chunks: 'all',
29+
reuseExistingChunk: true
30+
}
31+
}
32+
},
33+
minimizer: [
34+
new TerserPlugin({
35+
exclude: /(node_modules)/,
36+
minify: TerserPlugin.swcMinify,
37+
// the following options are passed to SWC https://swc.rs/docs/configuration/minification
38+
// Only enable what we need to speedup the build process
39+
terserOptions: {
40+
compress: {
41+
drop_console: process.env.DROP_CONSOLE_IN_PRODUCTION
42+
? process.env.DROP_CONSOLE_IN_PRODUCTION === 'true'
43+
: true,
44+
drop_debugger: true,
45+
unused: false,
46+
arrows: false,
47+
booleans: false,
48+
collapse_vars: false,
49+
comparisons: false,
50+
computed_props: false,
51+
conditionals: false,
52+
defaults: false,
53+
directives: false,
54+
evaluate: false,
55+
hoist_props: false,
56+
if_return: false,
57+
join_vars: false,
58+
loops: false,
59+
negate_iife: false,
60+
properties: false,
61+
sequences: false,
62+
side_effects: false,
63+
switches: false,
64+
toplevel: false,
65+
typeofs: false
66+
},
67+
mangle: {
68+
keepFnNames: true,
69+
// Required for extension messaging, as it ends up using different mangled
70+
// class name for the same class in service worker and UI scripts
71+
keep_classnames: true
72+
}
73+
}
74+
})
75+
]
76+
},
77+
plugins: [
78+
new BundleAnalyzerPlugin({
79+
analyzerMode: 'static',
80+
reportFilename: 'report.html',
81+
openAnalyzer: false
82+
})
83+
]
84+
});

‎apps/browser-extension-wallet/webpack.common.app.js

+14-5
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ module.exports = () =>
3232
path.join(__dirname, 'src/lib/scripts/trezor/trezor-usb-permissions.ts')
3333
)
3434
},
35+
output: {
36+
path: path.join(__dirname, 'dist/app'),
37+
filename: '[name].js',
38+
// the following setting is required for SRI to work:
39+
crossOriginLoading: 'anonymous'
40+
},
3541
experiments: {
3642
syncWebAssembly: true
3743
},
@@ -83,7 +89,10 @@ module.exports = () =>
8389
},
8490
{
8591
test: /\.(eot|otf|ttf|woff|woff2|gif|png|webm|mp4)$/,
86-
loader: 'file-loader'
92+
type: 'asset/resource',
93+
generator: {
94+
filename: '../assets/[name][ext]'
95+
}
8796
},
8897
{
8998
test: /\.txt$/i,
@@ -114,13 +123,13 @@ module.exports = () =>
114123
patterns: [
115124
{ from: 'src/assets/branding/*.png', to: '../[name][ext]' },
116125
{ from: 'src/assets/html/trezor-usb-permissions.html', to: '../[name][ext]' },
117-
{ from: path.resolve(__dirname, '../../packages/nami/dist/assets/video/*.mp4'), to: '../[name][ext]' },
126+
{ from: path.resolve(__dirname, '../../packages/nami/dist/assets/video/*.mp4'), to: '../assets/[name][ext]' },
118127
{ from: path.resolve(__dirname, 'src/assets/html/*.html'), to: '../[name][ext]' },
119-
{ from: path.resolve(__dirname, 'src/assets/html/*.js'), to: '../js/[name][ext]' },
120-
{ from: path.resolve(__dirname, 'src/assets/html/*.css'), to: '../[name][ext]' },
128+
{ from: path.resolve(__dirname, 'src/assets/html/*.js'), to: '../app/[name][ext]' },
129+
{ from: path.resolve(__dirname, 'src/assets/html/*.css'), to: '../assets/[name][ext]' },
121130
{
122131
from: path.resolve(__dirname, '../../packages/common/src/ui/assets/icons/loader.png'),
123-
to: '../[name][ext]'
132+
to: '../assets/[name][ext]'
124133
}
125134
]
126135
})

‎apps/browser-extension-wallet/webpack.common.js

-6
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ if ('SENTRY_ENVIRONMENT' in process.env) envsToExpose['SENTRY_ENVIRONMENT'] = pr
2323

2424
module.exports = () => {
2525
return {
26-
output: {
27-
path: path.join(__dirname, 'dist/js'),
28-
filename: '[name].js',
29-
// the following setting is required for SRI to work:
30-
crossOriginLoading: 'anonymous'
31-
},
3226
module: {
3327
rules: [
3428
{

0 commit comments

Comments
 (0)