Skip to content

Commit a29bf4e

Browse files
Alan Agiusalexeagle
Alan Agius
authored and
alexeagle
committed
feat(@angular-devkit/build-angular): enable differential loading for es2015 builds
With this change we turn on differential loading for projects that has es2015 as script target and still want to support browsers which that don't support ES2015. Supported browsers are defined in the browserlist file.
1 parent f1c58be commit a29bf4e

File tree

9 files changed

+27
-44
lines changed

9 files changed

+27
-44
lines changed

‎packages/angular_devkit/build_angular/src/angular-cli-files/models/es5-polyfills.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
// ES2015 symbol capabilities
9+
// ES2015 symbol capabilities
1010
import 'core-js/modules/es.symbol';
1111

1212
// ES2015 function capabilities

‎packages/angular_devkit/build_angular/src/angular-cli-files/models/safari-nomodule.min.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,14 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
7373
}
7474
}
7575

76-
if (buildOptions.es5BrowserSupport === undefined
77-
&& buildOptions.scriptTargetOverride === ts.ScriptTarget.ES5) {
78-
entryPoints['polyfills'] = [es5Polyfills];
79-
if (!buildOptions.aot) {
80-
entryPoints['polyfills'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
76+
if (buildOptions.es5BrowserSupport === undefined) {
77+
if (buildOptions.scriptTargetOverride === ts.ScriptTarget.ES2015) {
78+
entryPoints['polyfills'] = [path.join(__dirname, '..', 'safari-nomodule.js')];
79+
} else {
80+
entryPoints['polyfills'] = [es5Polyfills];
81+
if (!buildOptions.aot) {
82+
entryPoints['polyfills'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
83+
}
8184
}
8285
}
8386

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
7070
const scripts = new Set<string>();
7171

7272
// Sort files in the order we want to insert them by entrypoint and dedupes duplicates
73-
const mergedFiles = [...noModuleFiles, ...moduleFiles, ...files];
73+
const mergedFiles = [...moduleFiles, ...noModuleFiles, ...files];
7474
for (const entrypoint of entrypoints) {
7575
for (const { extension, file, name } of mergedFiles) {
7676
if (name !== entrypoint) { continue; }

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,12 @@ describe('augment-index-html', () => {
8282
<link rel="stylesheet" href="styles.css">
8383
</head>
8484
<body>
85-
<script src="runtime-es5.js" nomodule></script>
86-
<script src="polyfills-es5.js" nomodule></script>
8785
<script src="runtime-es2015.js" type="module"></script>
8886
<script src="polyfills-es2015.js" type="module"></script>
89-
<script src="main-es5.js" nomodule></script>
87+
<script src="runtime-es5.js" nomodule></script>
88+
<script src="polyfills-es5.js" nomodule></script>
9089
<script src="main-es2015.js" type="module"></script>
90+
<script src="main-es5.js" nomodule></script>
9191
</body>
9292
</html>
9393
`);
@@ -125,8 +125,8 @@ describe('augment-index-html', () => {
125125
</head>
126126
<body>
127127
<script src="scripts.js"></script>
128-
<script src="main-es5.js" nomodule></script>
129128
<script src="main-es2015.js" type="module"></script>
129+
<script src="main-es5.js" nomodule></script>
130130
</body>
131131
</html>
132132
`);

‎packages/angular_devkit/build_angular/src/browser/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ import {
4747
import { deleteOutputDir } from '../utils';
4848
import { generateBrowserWebpackConfigFromContext } from '../utils/webpack-browser-config';
4949
import { Schema as BrowserBuilderSchema } from './schema';
50-
import { isDifferentialLoadingNeeded } from './utils';
5150

5251
export type BrowserBuilderOutput = json.JsonObject & BuilderOutput & {
5352
outputPath: string;

packages/angular_devkit/build_angular/src/browser/utils.ts renamed to packages/angular_devkit/build_angular/src/utils/differential-loading.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,24 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import { Path, getSystemPath } from '@angular-devkit/core';
109
import * as browserslist from 'browserslist';
1110
import * as caniuse from 'caniuse-api';
1211
import * as ts from 'typescript';
1312

1413

1514
export function isDifferentialLoadingNeeded(
16-
projectRoot: Path,
15+
projectRoot: string,
1716
target: ts.ScriptTarget = ts.ScriptTarget.ES5): boolean {
1817

1918
const supportES2015 = target !== ts.ScriptTarget.ES3 && target !== ts.ScriptTarget.ES5;
2019

2120
return supportES2015 && isEs5SupportNeeded(projectRoot);
2221
}
2322

24-
export function isEs5SupportNeeded(projectRoot: Path): boolean {
23+
export function isEs5SupportNeeded(projectRoot: string): boolean {
2524
const browsersList: string[] = browserslist(
2625
undefined, {
27-
path: getSystemPath(projectRoot),
26+
path: projectRoot,
2827
});
2928

3029
return !caniuse.isSupported('es6-module', browsersList.join(', '));

packages/angular_devkit/build_angular/src/browser/utils_spec.ts renamed to packages/angular_devkit/build_angular/src/utils/differential-loading_spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import { TestProjectHost } from '@angular-devkit/architect/testing';
1111
import { join } from '@angular-devkit/core';
1212
import { ScriptTarget } from 'typescript';
13-
import { isDifferentialLoadingNeeded } from './utils';
13+
import { isDifferentialLoadingNeeded } from './differential-loading';
1414

1515
const devkitRoot = (global as any)._DevKitRoot; // tslint:disable-line:no-any
1616
const workspaceRoot = join(

‎packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,15 @@ import { getEsVersionForFileName } from '../angular-cli-files/models/webpack-con
2424
import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
2525
import { Schema as BrowserBuilderSchema } from '../browser/schema';
2626
import { NormalizedBrowserBuilderSchema, defaultProgress, normalizeBrowserSchema } from '../utils';
27+
import { isDifferentialLoadingNeeded } from './differential-loading';
2728

2829
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
2930
const webpackMerge = require('webpack-merge');
3031

3132
type BrowserWebpackConfigOptions = WebpackConfigOptions<NormalizedBrowserBuilderSchema>;
3233

3334
export async function generateWebpackConfig(
35+
context: BuilderContext,
3436
workspaceRoot: string,
3537
projectRoot: string,
3638
sourceRoot: string | undefined,
@@ -51,13 +53,10 @@ export async function generateWebpackConfig(
5153

5254
// At the moment, only the browser builder supports differential loading
5355
// However this config generation is used by multiple builders such as dev-server
54-
// const builderInfo = additionalOptions.builderInfo;
55-
// const differentialLoading =
56-
// builderInfo
57-
// && builderInfo.builderName === 'browser'
58-
// && isDifferentialLoadingNeeded(projectRoot, scriptTarget);
59-
const differentialLoading = false;
60-
const scriptTargets = [tsConfig.options.target];
56+
const scriptTarget = tsConfig.options.target;
57+
const differentialLoading = context.builder.builderName === 'browser'
58+
&& isDifferentialLoadingNeeded(projectRoot, scriptTarget);
59+
const scriptTargets = [scriptTarget];
6160

6261
if (differentialLoading) {
6362
scriptTargets.unshift(ts.ScriptTarget.ES5);
@@ -121,6 +120,7 @@ export async function generateWebpackConfig(
121120

122121
export async function generateBrowserWebpackConfigFromWorkspace(
123122
options: BrowserBuilderSchema,
123+
context: BuilderContext,
124124
projectName: string,
125125
workspace: experimental.workspace.Workspace,
126126
host: virtualFs.Host<fs.Stats>,
@@ -143,6 +143,7 @@ export async function generateBrowserWebpackConfigFromWorkspace(
143143
);
144144

145145
return generateWebpackConfig(
146+
context,
146147
getSystemPath(workspace.root),
147148
getSystemPath(projectRoot),
148149
sourceRoot && getSystemPath(sourceRoot),
@@ -176,6 +177,7 @@ export async function generateBrowserWebpackConfigFromContext(
176177

177178
const config = await generateBrowserWebpackConfigFromWorkspace(
178179
options,
180+
context,
179181
projectName,
180182
workspace,
181183
host,

0 commit comments

Comments
 (0)