Skip to content

Commit f49f644

Browse files
filipesilvahansl
filipesilva
authored and
hansl
committed
feat(@angular/cli): add scope hoisting via webpack 3
This should result in significant bundle size reduction. For best results, build for production with `--vendor-chunk=false`. See https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b for details.
1 parent 359ec37 commit f49f644

File tree

10 files changed

+187
-58
lines changed

10 files changed

+187
-58
lines changed

‎package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,21 @@
5353
"ember-cli-string-utils": "^1.0.0",
5454
"enhanced-resolve": "^3.1.0",
5555
"exports-loader": "^0.6.3",
56-
"extract-text-webpack-plugin": "^2.1.0",
56+
"extract-text-webpack-plugin": "3.0.0",
5757
"file-loader": "^0.10.0",
5858
"fs-extra": "~3.0.1",
5959
"get-caller-file": "^1.0.0",
6060
"glob": "^7.0.3",
6161
"heimdalljs": "^0.2.4",
6262
"heimdalljs-logger": "^0.1.9",
63-
"html-webpack-plugin": "^2.19.0",
63+
"html-webpack-plugin": "^2.29.0",
6464
"inflection": "^1.7.0",
6565
"inquirer": "^3.0.0",
6666
"isbinaryfile": "^3.0.0",
6767
"istanbul-instrumenter-loader": "^2.0.0",
6868
"json-loader": "^0.5.4",
6969
"less": "^2.7.2",
70-
"less-loader": "^4.0.2",
70+
"less-loader": "^4.0.5",
7171
"license-webpack-plugin": "^0.4.3",
7272
"loader-utils": "^1.0.2",
7373
"lodash": "^4.11.1",
@@ -97,9 +97,9 @@
9797
"typescript": "~2.3.1",
9898
"url-loader": "^0.5.7",
9999
"walk-sync": "^0.3.1",
100-
"webpack": "~2.4.0",
101-
"webpack-dev-middleware": "^1.10.2",
102-
"webpack-dev-server": "~2.4.5",
100+
"webpack": "~3.1.0",
101+
"webpack-dev-middleware": "^1.11.0",
102+
"webpack-dev-server": "~2.5.1",
103103
"webpack-merge": "^2.4.0",
104104
"zone.js": "^0.8.4"
105105
},

‎packages/@angular/cli/models/webpack-configs/browser.ts

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
6969
baseHref: buildOptions.baseHref
7070
}),
7171
new webpack.optimize.CommonsChunkPlugin({
72+
name: 'main',
7273
async: 'common',
7374
children: true,
7475
minChunks: 2

‎packages/@angular/cli/models/webpack-configs/common.ts

+2
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
106106
].concat(extraPlugins),
107107
node: {
108108
fs: 'empty',
109+
// `global` should be kept true, removing it resulted in a
110+
// massive size increase with NGO on AIO.
109111
global: true,
110112
crypto: 'empty',
111113
tls: 'empty',

‎packages/@angular/cli/models/webpack-configs/production.ts

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
9898
'NODE_ENV': 'production'
9999
}),
100100
new webpack.HashedModuleIdsPlugin(),
101+
new webpack.optimize.ModuleConcatenationPlugin(),
101102
new webpack.optimize.UglifyJsPlugin(<any>{
102103
mangle: { screw_ie8: true },
103104
compress: { screw_ie8: true, warnings: buildOptions.verbose },

‎packages/@angular/cli/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,20 @@
4141
"ember-cli-normalize-entity-name": "^1.0.0",
4242
"ember-cli-string-utils": "^1.0.0",
4343
"exports-loader": "^0.6.3",
44-
"extract-text-webpack-plugin": "^2.1.0",
44+
"extract-text-webpack-plugin": "3.0.0",
4545
"file-loader": "^0.10.0",
4646
"fs-extra": "^3.0.1",
4747
"get-caller-file": "^1.0.0",
4848
"glob": "^7.0.3",
4949
"heimdalljs": "^0.2.4",
5050
"heimdalljs-logger": "^0.1.9",
51-
"html-webpack-plugin": "^2.19.0",
51+
"html-webpack-plugin": "^2.29.0",
5252
"inflection": "^1.7.0",
5353
"inquirer": "^3.0.0",
5454
"isbinaryfile": "^3.0.0",
5555
"json-loader": "^0.5.4",
5656
"less": "^2.7.2",
57-
"less-loader": "^4.0.2",
57+
"less-loader": "^4.0.5",
5858
"license-webpack-plugin": "^0.4.2",
5959
"lodash": "^4.11.1",
6060
"memory-fs": "^0.4.1",
@@ -82,8 +82,8 @@
8282
"typescript": ">=2.0.0 <2.4.0",
8383
"url-loader": "^0.5.7",
8484
"walk-sync": "^0.3.1",
85-
"webpack": "~2.4.0",
86-
"webpack-dev-middleware": "^1.10.2",
85+
"webpack": "~3.1.0",
86+
"webpack-dev-middleware": "^1.11.0",
8787
"webpack-dev-server": "~2.4.5",
8888
"webpack-merge": "^2.4.0",
8989
"zone.js": "^0.8.4"

‎packages/@angular/cli/tasks/eject.ts

+3
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,9 @@ class JsonWebpackSerializer {
174174
case webpack.optimize.UglifyJsPlugin:
175175
this._addImport('webpack.optimize', 'UglifyJsPlugin');
176176
break;
177+
case (webpack.optimize as any).ModuleConcatenationPlugin:
178+
this._addImport('webpack.optimize', 'ModuleConcatenationPlugin');
179+
break;
177180
case angularCliPlugins.BaseHrefWebpackPlugin:
178181
case angularCliPlugins.NamedLazyChunksWebpackPlugin:
179182
case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:

‎packages/@angular/cli/webpack-custom-typings.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,9 @@ declare module 'webpack' {
77
export class HashedModuleIdsPlugin {
88
constructor();
99
}
10+
namespace optimize {
11+
export class ModuleConcatenationPlugin {
12+
constructor();
13+
}
14+
}
1015
}

‎scripts/test-licenses.js

+2
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const licenseReplacements = [
6464
// TODO(hansl): review these
6565
const ignoredPackages = [
6666
'[email protected]', // MIT, but doesn't list it in package.json
67+
'[email protected]', // MIT, but doesn't list it in package.json.
6768
'[email protected]', // MIT, but doesn't list it in package.json
6869
'[email protected]', // Looks like MIT
6970
'[email protected]', // Looks like MIT
@@ -81,6 +82,7 @@ const ignoredPackages = [
8182
'[email protected]', // MIT, but doesn't list it in package.json
8283
'[email protected]', // BSD, but doesn't list it in package.json
8384
'[email protected]', // MIT, but doesn't list it in package.json
85+
'[email protected]', // MIT, but doesn't list it in package.json.
8486
'[email protected]', // BSD, but doesn't list it in package.json
8587
'undefined@undefined', // Test package with no name nor version.
8688
'[email protected]', // Looks like MIT

‎tests/e2e/tests/build/chunk-hash.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ export default function() {
6161
`, '@angular/router'))
6262
.then(() => addImportToModule(
6363
'src/app/app.module.ts', 'ReactiveFormsModule', '@angular/forms'))
64-
.then(() => ng('build', '--prod'))
64+
.then(() => ng('build', '--output-hashing=all'))
6565
.then(() => {
6666
oldHashes = generateFileHashMap();
6767
})
68-
.then(() => ng('build', '--prod'))
68+
.then(() => ng('build', '--output-hashing=all'))
6969
.then(() => {
7070
newHashes = generateFileHashMap();
7171
})
@@ -74,16 +74,16 @@ export default function() {
7474
oldHashes = newHashes;
7575
})
7676
.then(() => writeFile('src/styles.css', 'body { background: blue; }'))
77-
.then(() => ng('build', '--prod'))
77+
.then(() => ng('build', '--output-hashing=all'))
7878
.then(() => {
7979
newHashes = generateFileHashMap();
8080
})
8181
.then(() => {
82-
validateHashes(oldHashes, newHashes, ['styles']);
82+
validateHashes(oldHashes, newHashes, ['inline', 'styles']);
8383
oldHashes = newHashes;
8484
})
8585
.then(() => writeFile('src/app/app.component.css', 'h1 { margin: 10px; }'))
86-
.then(() => ng('build', '--prod'))
86+
.then(() => ng('build', '--output-hashing=all'))
8787
.then(() => {
8888
newHashes = generateFileHashMap();
8989
})
@@ -93,7 +93,7 @@ export default function() {
9393
})
9494
.then(() => addImportToModule(
9595
'src/app/lazy/lazy.module.ts', 'ReactiveFormsModule', '@angular/forms'))
96-
.then(() => ng('build', '--prod'))
96+
.then(() => ng('build', '--output-hashing=all'))
9797
.then(() => {
9898
newHashes = generateFileHashMap();
9999
})

0 commit comments

Comments
 (0)