Skip to content

Commit 7fd979a

Browse files
enuchienuchi
authored
Performance improvement: stop serving wrapper code (#179)
* Only serve react app in development - Don't serve server code from "webpack serve" - Don't serve iframe wrapper from "webpack serve" - Update "basic" local test to load -impl file, not wrapper
1 parent 50fc0de commit 7fd979a

10 files changed

+22
-8
lines changed

‎src/client/dialog-demo-bootstrap/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
<head>
44
<base target="_top" />
55
<!-- Add any external scripts and stylesheets here -->
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
10+
rel="stylesheet"
11+
/>
612
<link
713
rel="stylesheet"
814
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

‎src/client/dialog-demo-bootstrap/styles.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
/* needed to make consistent test snapshots across OSs */
2+
html {
3+
height: 100%;
4+
}
25
body {
3-
font-family: Arial !important;
6+
font-family: Roboto !important;
7+
height: 100%;
48
}
59

610
/*

‎test/__image_snapshots__/local-development-test-js-local-setup-extended-should-load-bootstrap-example-1-snap.png‎

4.27 KB
Loading

‎test/__image_snapshots__/local-development-test-js-local-setup-extended-should-modify-bootstrap-title-example-1-snap.png‎

6.34 KB
Loading

‎test/__image_snapshots__/local-development-test-js-local-setup-extended-should-modify-bootstrap-title-example-back-to-original-1-snap.png‎

4.27 KB
Loading

‎test/__image_snapshots__/local-development-test-js-local-setup-should-load-bootstrap-example-1-snap.png‎

311 Bytes
Loading

‎test/__image_snapshots__/local-development-test-js-local-setup-should-modify-bootstrap-title-example-1-snap.png‎

176 Bytes
Loading

‎test/__image_snapshots__/local-development-test-js-local-setup-should-modify-bootstrap-title-example-back-to-original-1-snap.png‎

311 Bytes
Loading

‎test/local-development.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const webpackDevServerReady = async (process) => {
2929
console.log('Waiting for Webpack Dev Server to finish loading...');
3030
return new Promise((resolve) => {
3131
process.stdout.on('data', (data) => {
32-
if (data.includes('DEVELOPMENT: CLIENT - Dialog Demo Bootstrap')) {
32+
if (data.includes('CLIENT - Dialog Demo Bootstrap')) {
3333
resolve();
3434
}
3535
});
@@ -56,12 +56,13 @@ describe(`Local setup ${isExtended ? '*extended*' : ''}`, () => {
5656
if (isExtended) {
5757
await openAddon(page);
5858
} else {
59-
await page.goto('https://localhost:3000/dialog-demo-bootstrap.html');
59+
await page.goto('https://localhost:3000/dialog-demo-bootstrap-impl.html');
6060
await page.waitForTimeout(3000);
6161
}
6262
});
6363

6464
afterAll(() => {
65+
console.log('Closing process.');
6566
process.kill();
6667
});
6768

‎webpack.config.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ envVars.NODE_ENV = process.env.NODE_ENV;
2525
envVars.PORT = PORT;
2626

2727
const isProd = process.env.NODE_ENV === 'production';
28+
const isWebpackServe = process.env.WEBPACK_SERVE === 'true';
29+
2830
const publicPath = process.env.ASSET_PATH || '/';
2931

3032
/*********************************
@@ -387,10 +389,11 @@ module.exports = [
387389
// 2. Set up webpack dev server during development
388390
// Note: devServer settings are only read in the first element when module.exports is an array
389391
{ ...copyFilesConfig, ...(isProd ? {} : { devServer }) },
390-
// 3. Create the server bundle
391-
serverConfig,
392+
// 3. Create the server bundle. Don't serve server bundle when running webpack serve.
393+
!isWebpackServe && serverConfig,
392394
// 4. Create one client bundle for each client entrypoint.
393395
...clientConfigs,
394-
// 5. Create a development dialog bundle for each client entrypoint during development.
395-
...(isProd ? [] : devClientConfigs),
396-
];
396+
// 5. Create a development dialog wrapper bundle for each client entrypoint during development.
397+
// Don't actually serve it though when running webpack serve.
398+
...(isProd || isWebpackServe ? [] : devClientConfigs),
399+
].filter(Boolean);

0 commit comments

Comments
 (0)