Skip to content

Commit 667321b

Browse files
clydinclydin
committed
feat(@angular-devkit/build-angular): add defer attributes to classic scripts
This change synchronizes the behavior of classic scripts and module scripts (`type="module"`). Module scripts are deferred by default. Also, certain injected scripts are not considered module scripts even in a ES2015+ build due to the strict mode behavior of module scripts. Deferring such scripts also ensures consistent execution in those scenarios.
1 parent b5924fe commit 667321b

File tree

9 files changed

+71
-67
lines changed

9 files changed

+71
-67
lines changed

‎packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,14 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
150150
const isModuleType = moduleFiles.some(scriptPredictor);
151151

152152
if (isNoModuleType && !isModuleType) {
153-
attrs.push({ name: 'nomodule', value: null });
153+
attrs.push({ name: 'nomodule', value: null }, { name: 'defer', value: null });
154154
} else if (isModuleType && !isNoModuleType) {
155155
attrs.push({ name: 'type', value: 'module' });
156+
} else {
157+
attrs.push({ name: 'defer', value: null });
156158
}
159+
} else {
160+
attrs.push({ name: 'defer', value: null });
157161
}
158162

159163
if (params.sri) {

‎packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,10 @@ describe('augment-index-html', () => {
8484
<body>
8585
<script src="runtime-es2015.js" type="module"></script>
8686
<script src="polyfills-es2015.js" type="module"></script>
87-
<script src="runtime-es5.js" nomodule></script>
88-
<script src="polyfills-es5.js" nomodule></script>
87+
<script src="runtime-es5.js" nomodule defer></script>
88+
<script src="polyfills-es5.js" nomodule defer></script>
8989
<script src="main-es2015.js" type="module"></script>
90-
<script src="main-es5.js" nomodule></script>
90+
<script src="main-es5.js" nomodule defer></script>
9191
</body>
9292
</html>
9393
`);
@@ -124,9 +124,9 @@ describe('augment-index-html', () => {
124124
<link rel="stylesheet" href="styles.css">
125125
</head>
126126
<body>
127-
<script src="scripts.js"></script>
127+
<script src="scripts.js" defer></script>
128128
<script src="main-es2015.js" type="module"></script>
129-
<script src="main-es5.js" nomodule></script>
129+
<script src="main-es5.js" nomodule defer></script>
130130
</body>
131131
</html>
132132
`);

‎tests/legacy-cli/e2e/tests/basic/scripts-array.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,14 @@ export default function() {
6767
oneLineTrim`
6868
<script src="runtime-es2015.js" type="module"></script>
6969
<script src="polyfills-es2015.js" type="module"></script>
70-
<script src="runtime-es5.js" nomodule></script>
71-
<script src="polyfills-es5.js" nomodule></script>
72-
<script src="scripts.js"></script>
73-
<script src="renamed-script.js"></script>
70+
<script src="runtime-es5.js" nomodule defer></script>
71+
<script src="polyfills-es5.js" nomodule defer></script>
72+
<script src="scripts.js" defer></script>
73+
<script src="renamed-script.js" defer></script>
7474
<script src="vendor-es2015.js" type="module"></script>
7575
<script src="main-es2015.js" type="module"></script>
76-
<script src="vendor-es5.js" nomodule></script>
77-
<script src="main-es5.js" nomodule></script>
76+
<script src="vendor-es5.js" nomodule defer></script>
77+
<script src="main-es5.js" nomodule defer></script>
7878
`,
7979
),
8080
)

‎tests/legacy-cli/e2e/tests/basic/styles-array.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ export default function() {
5555
oneLineTrim`
5656
<script src="runtime-es2015.js" type="module"></script>
5757
<script src="polyfills-es2015.js" type="module"></script>
58-
<script src="runtime-es5.js" nomodule></script>
59-
<script src="polyfills-es5.js" nomodule></script>
58+
<script src="runtime-es5.js" nomodule defer></script>
59+
<script src="polyfills-es5.js" nomodule defer></script>
6060
<script src="vendor-es2015.js" type="module"></script>
6161
<script src="main-es2015.js" type="module"></script>
62-
<script src="vendor-es5.js" nomodule></script>
63-
<script src="main-es5.js" nomodule></script>
62+
<script src="vendor-es5.js" nomodule defer></script>
63+
<script src="main-es5.js" nomodule defer></script>
6464
`,
6565
),
6666
)

‎tests/legacy-cli/e2e/tests/build/polyfills.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export default async function () {
1616
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
1717
<script src="runtime-es2015.js" type="module"></script>
1818
<script src="polyfills-es2015.js" type="module"></script>
19-
<script src="runtime-es5.js" nomodule></script>
20-
<script src="polyfills-es5.js" nomodule></script>
19+
<script src="runtime-es5.js" nomodule defer></script>
20+
<script src="polyfills-es5.js" nomodule defer></script>
2121
`);
2222
const jitPolyfillSize = await getFileSize('dist/test-project/polyfills-es5.js');
2323

@@ -30,7 +30,7 @@ export default async function () {
3030
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
3131
<script src="runtime-es2015.js" type="module"></script>
3232
<script src="polyfills-es2015.js" type="module"></script>
33-
<script src="runtime-es5.js" nomodule></script>
34-
<script src="polyfills-es5.js" nomodule></script>
33+
<script src="runtime-es5.js" nomodule defer></script>
34+
<script src="polyfills-es5.js" nomodule defer></script>
3535
`);
3636
}

‎tests/legacy-cli/e2e/tests/build/styles/extract-css.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,12 @@ export default function() {
7474
oneLineTrim`
7575
<script src="runtime-es2015.js" type="module"></script>
7676
<script src="polyfills-es2015.js" type="module"></script>
77-
<script src="runtime-es5.js" nomodule></script>
78-
<script src="polyfills-es5.js" nomodule></script>
77+
<script src="runtime-es5.js" nomodule defer></script>
78+
<script src="polyfills-es5.js" nomodule defer></script>
7979
<script src="vendor-es2015.js" type="module"></script>
8080
<script src="main-es2015.js" type="module"></script>
81-
<script src="vendor-es5.js" nomodule></script>
82-
<script src="main-es5.js" nomodule></script>
81+
<script src="vendor-es5.js" nomodule defer></script>
82+
<script src="main-es5.js" nomodule defer></script>
8383
`,
8484
),
8585
)
@@ -112,16 +112,16 @@ export default function() {
112112
oneLineTrim`
113113
<script src="runtime-es2015.js" type="module"></script>
114114
<script src="polyfills-es2015.js" type="module"></script>
115-
<script src="runtime-es5.js" nomodule></script>
116-
<script src="polyfills-es5.js" nomodule></script>
115+
<script src="runtime-es5.js" nomodule defer></script>
116+
<script src="polyfills-es5.js" nomodule defer></script>
117117
<script src="styles-es2015.js" type="module"></script>
118-
<script src="styles-es5.js" nomodule></script>
118+
<script src="styles-es5.js" nomodule defer></script>
119119
<script src="renamed-style-es2015.js" type="module"></script>
120-
<script src="renamed-style-es5.js" nomodule></script>
120+
<script src="renamed-style-es5.js" nomodule defer></script>
121121
<script src="vendor-es2015.js" type="module"></script>
122122
<script src="main-es2015.js" type="module"></script>
123-
<script src="vendor-es5.js" nomodule></script>
124-
<script src="main-es5.js" nomodule></script>
123+
<script src="vendor-es5.js" nomodule defer></script>
124+
<script src="main-es5.js" nomodule defer></script>
125125
`,
126126
),
127127
)

‎tests/legacy-cli/e2e/tests/misc/support-ie.ts

+17-17
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,22 @@ export default async function () {
1818
await ng('build');
1919
await expectFileNotToExist('dist/test-project/polyfills-es5.js');
2020
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
21-
<script src="runtime.js"></script>
22-
<script src="polyfills.js"></script>
23-
<script src="styles.js"></script>
24-
<script src="vendor.js"></script>
25-
<script src="main.js"></script>
21+
<script src="runtime.js" defer></script>
22+
<script src="polyfills.js" defer></script>
23+
<script src="styles.js" defer></script>
24+
<script src="vendor.js" defer></script>
25+
<script src="main.js" defer></script>
2626
`);
2727

2828
await ng('build', `--es5BrowserSupport`);
2929
await expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js');
3030
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
31-
<script src="runtime.js"></script>
32-
<script src="polyfills-es5.js" nomodule></script>
33-
<script src="polyfills.js"></script>
34-
<script src="styles.js"></script>
35-
<script src="vendor.js"></script>
36-
<script src="main.js"></script>
31+
<script src="runtime.js" defer></script>
32+
<script src="polyfills-es5.js" nomodule defer></script>
33+
<script src="polyfills.js" defer></script>
34+
<script src="styles.js" defer></script>
35+
<script src="vendor.js" defer></script>
36+
<script src="main.js" defer></script>
3737
`);
3838

3939
await updateJsonFile('angular.json', workspaceJson => {
@@ -44,11 +44,11 @@ export default async function () {
4444
await ng('build');
4545
await expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js');
4646
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
47-
<script src="runtime.js"></script>
48-
<script src="polyfills-es5.js" nomodule></script>
49-
<script src="polyfills.js"></script>
50-
<script src="styles.js"></script>
51-
<script src="vendor.js"></script>
52-
<script src="main.js"></script>
47+
<script src="runtime.js" defer></script>
48+
<script src="polyfills-es5.js" nomodule defer></script>
49+
<script src="polyfills.js" defer></script>
50+
<script src="styles.js" defer></script>
51+
<script src="vendor.js" defer></script>
52+
<script src="main.js" defer></script>
5353
`);
5454
}

‎tests/legacy-cli/e2e/tests/misc/support-safari-10.1.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ export default async function () {
1313
await expectFileNotToExist('dist/test-project/polyfills-es5.js');
1414
await expectFileNotToExist('dist/test-project/polyfills-nomodule-es5.js');
1515
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
16-
<script src="runtime.js"></script>
17-
<script src="polyfills.js"></script>
18-
<script src="styles.js"></script>
19-
<script src="vendor.js"></script>
20-
<script src="main.js"></script>
16+
<script src="runtime.js" defer></script>
17+
<script src="polyfills.js" defer></script>
18+
<script src="styles.js" defer></script>
19+
<script src="vendor.js" defer></script>
20+
<script src="main.js" defer></script>
2121
`);
2222

2323
await writeFile('browserslist', `
@@ -27,16 +27,16 @@ export default async function () {
2727
await ng('build');
2828
await expectFileToExist('dist/test-project/polyfills-nomodule-es5.js');
2929
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
30-
<script src="polyfills-nomodule-es5.js" nomodule></script>
30+
<script src="polyfills-nomodule-es5.js" nomodule defer></script>
3131
<script src="runtime-es2015.js" type="module"></script>
3232
<script src="polyfills-es2015.js" type="module"></script>
33-
<script src="runtime-es5.js" nomodule></script>
34-
<script src="polyfills-es5.js" nomodule></script>
33+
<script src="runtime-es5.js" nomodule defer></script>
34+
<script src="polyfills-es5.js" nomodule defer></script>
3535
<script src="styles-es2015.js" type="module"></script>
36-
<script src="styles-es5.js" nomodule></script>
36+
<script src="styles-es5.js" nomodule defer></script>
3737
<script src="vendor-es2015.js" type="module"></script>
3838
<script src="main-es2015.js" type="module"></script>
39-
<script src="vendor-es5.js" nomodule></script>
40-
<script src="main-es5.js" nomodule></script>
39+
<script src="vendor-es5.js" nomodule defer></script>
40+
<script src="main-es5.js" nomodule defer></script>
4141
`);
4242
}

‎tests/legacy-cli/e2e/tests/third-party/bootstrap.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ export default function() {
2424
.then(() => expectFileToMatch('dist/test-project/index.html', oneLineTrim`
2525
<script src="runtime-es2015.js" type="module"></script>
2626
<script src="polyfills-es2015.js" type="module"></script>
27-
<script src="runtime-es5.js" nomodule></script>
28-
<script src="polyfills-es5.js" nomodule></script>
29-
<script src="scripts.js"></script>
27+
<script src="runtime-es5.js" nomodule defer></script>
28+
<script src="polyfills-es5.js" nomodule defer></script>
29+
<script src="scripts.js" defer></script>
3030
<script src="vendor-es2015.js" type="module"></script>
3131
<script src="main-es2015.js" type="module"></script>
32-
<script src="vendor-es5.js" nomodule></script>
33-
<script src="main-es5.js" nomodule></script>
32+
<script src="vendor-es5.js" nomodule defer></script>
33+
<script src="main-es5.js" nomodule defer></script>
3434
`))
3535
.then(() => ng(
3636
'build',
@@ -44,10 +44,10 @@ export default function() {
4444
.then(() => expectFileToMatch('dist/test-project/index.html', oneLineTrim`
4545
<script src="runtime-es2015.js" type="module"></script>
4646
<script src="polyfills-es2015.js" type="module"></script>
47-
<script src="runtime-es5.js" nomodule></script>
48-
<script src="polyfills-es5.js" nomodule></script>
49-
<script src="scripts.js"></script>
47+
<script src="runtime-es5.js" nomodule defer></script>
48+
<script src="polyfills-es5.js" nomodule defer></script>
49+
<script src="scripts.js" defer></script>
5050
<script src="main-es2015.js" type="module"></script>
51-
<script src="main-es5.js" nomodule></script>
51+
<script src="main-es5.js" nomodule defer></script>
5252
`));
5353
}

0 commit comments

Comments
 (0)