Skip to content

Commit 5ad393e

Browse files
jaysoojaysoo
committed
feat(web): use babel-loader instead of ts-loader for web build builder
- removes the `differentialLoading` build option - differential loading is always enabled for prod builds BEFORE (without ESM): Benchmark #1: nx build demo --prod Time (mean ± σ): 13.834 s ± 1.731 s [User: 11.817 s, System: 1.352 s] Range (min … max): 11.947 s … 16.015 s 10 runs AFTER (with ESM): Benchmark #1: nx build demo --prod Time (mean ± σ): 18.711 s ± 1.310 s [User: 12.172 s, System: 1.394 s] Range (min … max): 17.232 s … 20.770 s 10 runs
1 parent 70d71b3 commit 5ad393e

File tree

40 files changed

+635
-567
lines changed

40 files changed

+635
-567
lines changed

‎docs/angular/api-react/schematics/application.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,6 @@ ng g app myapp --routing
4848

4949
## Options
5050

51-
### babel
52-
53-
Default: `false`
54-
55-
Type: `boolean`
56-
57-
Use Babel and TypeScript preset instead of ts-loader (Useful if you need Babel plugins)
58-
5951
### classComponent
6052

6153
Alias(es): C

‎docs/angular/api-web/builders/build.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,6 @@ Type: `string`
4040

4141
URL where the application will be deployed.
4242

43-
### differentialLoading
44-
45-
Default: `true`
46-
47-
Type: `boolean`
48-
49-
Enable differential loading for es5 browsers
50-
5143
### es2015Polyfills
5244

5345
Type: `string`

‎docs/react/api-react/schematics/application.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,6 @@ nx g app myapp --routing
4848

4949
## Options
5050

51-
### babel
52-
53-
Default: `false`
54-
55-
Type: `boolean`
56-
57-
Use Babel and TypeScript preset instead of ts-loader (Useful if you need Babel plugins)
58-
5951
### classComponent
6052

6153
Alias(es): C

‎docs/react/api-web/builders/build.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,6 @@ Type: `string`
4141

4242
URL where the application will be deployed.
4343

44-
### differentialLoading
45-
46-
Default: `true`
47-
48-
Type: `boolean`
49-
50-
Enable differential loading for es5 browsers
51-
5244
### es2015Polyfills
5345

5446
Type: `string`

‎docs/web/api-react/schematics/application.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,6 @@ nx g app myapp --routing
4848

4949
## Options
5050

51-
### babel
52-
53-
Default: `false`
54-
55-
Type: `boolean`
56-
57-
Use Babel and TypeScript preset instead of ts-loader (Useful if you need Babel plugins)
58-
5951
### classComponent
6052

6153
Alias(es): C

‎docs/web/api-web/builders/build.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,6 @@ Type: `string`
4141

4242
URL where the application will be deployed.
4343

44-
### differentialLoading
45-
46-
Default: `true`
47-
48-
Type: `boolean`
49-
50-
Enable differential loading for es5 browsers
51-
5244
### es2015Polyfills
5345

5446
Type: `string`

‎e2e/delegate-to-cli.test.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,16 @@ forEachCli(() => {
1313

1414
const appName = uniq('app');
1515
runCommand(`npm run nx -- g @nrwl/web:app ${appName}`);
16-
runCommand(`npm run nx -- build ${appName}`);
16+
runCommand(`npm run nx -- build ${appName} --prod --outputHashing none`);
1717

1818
checkFilesExist(
1919
`dist/apps/${appName}/index.html`,
20-
`dist/apps/${appName}/polyfills-es2015.js`,
21-
`dist/apps/${appName}/runtime-es2015.js`,
22-
`dist/apps/${appName}/main-es2015.js`,
23-
`dist/apps/${appName}/styles-es2015.js`,
24-
`dist/apps/${appName}/polyfills-es5.js`,
25-
`dist/apps/${appName}/runtime-es5.js`,
26-
`dist/apps/${appName}/main-es5.js`,
27-
`dist/apps/${appName}/styles-es5.js`
20+
`dist/apps/${appName}/runtime.js`,
21+
`dist/apps/${appName}/polyfills.esm.js`,
22+
`dist/apps/${appName}/main.esm.js`,
23+
`dist/apps/${appName}/polyfills.es5.js`,
24+
`dist/apps/${appName}/main.es5.js`,
25+
`dist/apps/${appName}/styles.css`
2826
);
2927
}, 120000);
3028
});

‎e2e/react.test.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ forEachCli(currentCLIName => {
2424
const libName = uniq('lib');
2525

2626
runCLI(
27-
`generate @nrwl/react:app ${appName} --no-interactive --babel --linter=${linter}`
27+
`generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
2828
);
2929
runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
3030

@@ -42,7 +42,7 @@ forEachCli(currentCLIName => {
4242
const appName = uniq('app');
4343

4444
runCLI(
45-
`generate @nrwl/react:app ${appName} --routing --no-interactive --babel --linter=${linter}`
45+
`generate @nrwl/react:app ${appName} --routing --no-interactive --linter=${linter}`
4646
);
4747

4848
await testGeneratedApp(appName, { checkStyles: true, checkLinter: true });
@@ -53,7 +53,7 @@ forEachCli(currentCLIName => {
5353
const appName = uniq('app');
5454

5555
runCLI(
56-
`generate @nrwl/react:app ${appName} --style styled-components --no-interactive --babel --linter=${linter}`
56+
`generate @nrwl/react:app ${appName} --style styled-components --no-interactive --linter=${linter}`
5757
);
5858

5959
await testGeneratedApp(appName, {
@@ -68,7 +68,7 @@ forEachCli(currentCLIName => {
6868
const libName = uniq('lib');
6969

7070
runCLI(
71-
`generate @nrwl/react:app ${appName} --no-interactive --babel --linter=${linter}`
71+
`generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
7272
);
7373
runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
7474

@@ -129,14 +129,16 @@ forEachCli(currentCLIName => {
129129
}
130130
checkFilesExist(...filesToCheck);
131131
expect(readFile(`dist/apps/${appName}/main.js`)).toContain(
132-
'var App = function App() {'
132+
'var App = () => {'
133133
);
134134
runCLI(`build ${appName} --prod --output-hashing none`);
135135
filesToCheck = [
136136
`dist/apps/${appName}/index.html`,
137-
`dist/apps/${appName}/polyfills.js`,
138137
`dist/apps/${appName}/runtime.js`,
139-
`dist/apps/${appName}/main.js`
138+
`dist/apps/${appName}/polyfills.esm.js`,
139+
`dist/apps/${appName}/main.esm.js`,
140+
`dist/apps/${appName}/polyfills.es5.js`,
141+
`dist/apps/${appName}/main.es5.js`
140142
];
141143
if (opts.checkStyles) {
142144
filesToCheck.push(`dist/apps/${appName}/styles.css`);

‎e2e/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@ export function copyMissingPackages(): void {
206206
'@babel/preset-env',
207207
'@babel/preset-react',
208208
'@babel/preset-typescript',
209+
'@babel/plugin-proposal-class-properties',
209210
'@babel/plugin-proposal-decorators',
210211
'babel-loader',
211212
'babel-plugin-macros',

‎e2e/web.test.ts‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,30 +26,22 @@ forEachCli(currentCLIName => {
2626
runCLI(`build ${appName}`);
2727
checkFilesExist(
2828
`dist/apps/${appName}/index.html`,
29-
`dist/apps/${appName}/polyfills-es2015.js`,
30-
`dist/apps/${appName}/runtime-es2015.js`,
31-
`dist/apps/${appName}/main-es2015.js`,
32-
`dist/apps/${appName}/styles-es2015.js`,
33-
`dist/apps/${appName}/polyfills-es5.js`,
34-
`dist/apps/${appName}/runtime-es5.js`,
35-
`dist/apps/${appName}/main-es5.js`,
36-
`dist/apps/${appName}/styles-es5.js`
29+
`dist/apps/${appName}/runtime.js`,
30+
`dist/apps/${appName}/polyfills.js`,
31+
`dist/apps/${appName}/main.js`,
32+
`dist/apps/${appName}/styles.js`
3733
);
38-
expect(readFile(`dist/apps/${appName}/main-es5.js`)).toContain(
39-
'var AppElement = /** @class */ (function (_super) {'
40-
);
41-
expect(readFile(`dist/apps/${appName}/main-es2015.js`)).toContain(
34+
expect(readFile(`dist/apps/${appName}/main.js`)).toContain(
4235
'class AppElement'
4336
);
4437
runCLI(`build ${appName} --prod --output-hashing none`);
4538
checkFilesExist(
4639
`dist/apps/${appName}/index.html`,
47-
`dist/apps/${appName}/polyfills-es2015.js`,
48-
`dist/apps/${appName}/runtime-es2015.js`,
49-
`dist/apps/${appName}/main-es2015.js`,
50-
`dist/apps/${appName}/polyfills-es5.js`,
51-
`dist/apps/${appName}/runtime-es5.js`,
52-
`dist/apps/${appName}/main-es5.js`,
40+
`dist/apps/${appName}/runtime.js`,
41+
`dist/apps/${appName}/polyfills.esm.js`,
42+
`dist/apps/${appName}/main.esm.js`,
43+
`dist/apps/${appName}/polyfills.es5.js`,
44+
`dist/apps/${appName}/main.es5.js`,
5345
`dist/apps/${appName}/styles.css`
5446
);
5547
expect(readFile(`dist/apps/${appName}/index.html`)).toContain(

0 commit comments

Comments
 (0)