player/gas-react-sheets
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Performance improvement: stop serving wrapper code (#179)

Browse Source 
* 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
This commit is contained in:
Elisha Nuchi
2023-03-10 14:43:48 -05:00
committed by GitHub
parent 50fc0de433
commit 7fd979aed8
10 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/dialog-demo-bootstrap/index.html
+6
View File
@@ -3,6 +3,12 @@
<head> <head>
<base target="_top" /> <base target="_top" />
<!-- Add any external scripts and stylesheets here --> <!-- Add any external scripts and stylesheets here -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
src/client/dialog-demo-bootstrap/styles.css
+5 -1
View File
@@ -1,6 +1,10 @@
/* needed to make consistent test snapshots across OSs */ /* needed to make consistent test snapshots across OSs */
html {
height: 100%;
}
body { body {
font-family: Arial !important; font-family: Roboto !important;
height: 100%;
} }
/* /*
test/__image_snapshots__/local-development-test-js-local-setup-extended-should-load-bootstrap-example-1-snap.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 54 KiB

test/__image_snapshots__/local-development-test-js-local-setup-extended-should-modify-bootstrap-title-example-1-snap.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 54 KiB

test/__image_snapshots__/local-development-test-js-local-setup-extended-should-modify-bootstrap-title-example-back-to-original-1-snap.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 54 KiB

test/__image_snapshots__/local-development-test-js-local-setup-should-load-bootstrap-example-1-snap.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

test/__image_snapshots__/local-development-test-js-local-setup-should-modify-bootstrap-title-example-1-snap.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 39 KiB

test/__image_snapshots__/local-development-test-js-local-setup-should-modify-bootstrap-title-example-back-to-original-1-snap.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

test/local-development.test.js
+3 -2
View File
@@ -29,7 +29,7 @@ const webpackDevServerReady = async (process) => {
console.log('Waiting for Webpack Dev Server to finish loading...'); console.log('Waiting for Webpack Dev Server to finish loading...');
return new Promise((resolve) => { return new Promise((resolve) => {
process.stdout.on('data', (data) => { process.stdout.on('data', (data) => {
if (data.includes('DEVELOPMENT: CLIENT - Dialog Demo Bootstrap')) { if (data.includes('CLIENT - Dialog Demo Bootstrap')) {
resolve(); resolve();
} }
}); });
@@ -56,12 +56,13 @@ describe(`Local setup ${isExtended ? '*extended*' : ''}`, () => {
if (isExtended) { if (isExtended) {
await openAddon(page); await openAddon(page);
} else { } else {
await page.goto('https://localhost:3000/dialog-demo-bootstrap.html'); await page.goto('https://localhost:3000/dialog-demo-bootstrap-impl.html');
await page.waitForTimeout(3000); await page.waitForTimeout(3000);
} }
}); });
afterAll(() => { afterAll(() => {
console.log('Closing process.');
process.kill(); process.kill();
}); });
webpack.config.js
+8 -5
View File
@@ -25,6 +25,8 @@ envVars.NODE_ENV = process.env.NODE_ENV;
envVars.PORT = PORT; envVars.PORT = PORT;
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
const isWebpackServe = process.env.WEBPACK_SERVE === 'true';
const publicPath = process.env.ASSET_PATH || '/'; const publicPath = process.env.ASSET_PATH || '/';
/********************************* /*********************************
@@ -387,10 +389,11 @@ module.exports = [
// 2. Set up webpack dev server during development // 2. Set up webpack dev server during development
// Note: devServer settings are only read in the first element when module.exports is an array // Note: devServer settings are only read in the first element when module.exports is an array
{ ...copyFilesConfig, ...(isProd ? {} : { devServer }) }, { ...copyFilesConfig, ...(isProd ? {} : { devServer }) },
// 3. Create the server bundle // 3. Create the server bundle. Don't serve server bundle when running webpack serve.
serverConfig, !isWebpackServe && serverConfig,
// 4. Create one client bundle for each client entrypoint. // 4. Create one client bundle for each client entrypoint.
...clientConfigs, ...clientConfigs,
// 5. Create a development dialog bundle for each client entrypoint during development. // 5. Create a development dialog wrapper bundle for each client entrypoint during development.
...(isProd ? [] : devClientConfigs), // Don't actually serve it though when running webpack serve.
]; ...(isProd || isWebpackServe ? [] : devClientConfigs),
].filter(Boolean);