I have two identical Angular projects, one an angular-cli and another a Webpack version using @ngtools/webpack. Both projects are running Angular 7.1.4 and @angular-devkit 0.13.5. The Angular code is the initial app module/component that is generated with the angular-cli.
The issue I am having is that the Webpack version is generating a compressed app bundle of 450 KB but the angular-cli's bundle is 238 KB. Without the TerserPlugin, the angular-cli's app bundle is 1.51 MB and Webpack's output is 1.62 MB.
For angular-cli, I am running "ng build --prod=true" with this config:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
And here is my Webpack config:
{
mode: 'production',
entry: {
app: './src/main',
},
output: {
path: path.resolve(__dirname, 'public'),
filename: "[id].[chunkhash].js",
chunkFilename: "[id].[chunkhash].js",
},
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js'],
},
module: {
rules: [
{
test: /\.html$/,
loader: 'raw-loader',
},
{
test: /\.scss$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
},
]
},
{
test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
loader: 'file-loader',
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
},
{
test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
parser: { system: true },
},
{
test: /\.js$/,
use: [
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: { sourceMap: false },
},
],
},
]
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
terserOptions: {
compress: {
pure_getters: true,
passes: 3,
global_defs: {
ngDevMode: false,
},
},
output: {
ascii_only: true,
comments: false,
safari10: true,
webkit: true,
},
},
})
],
providedExports: true,
usedExports: true,
concatenateModules: true,
runtimeChunk: true,
},
plugins: [
new AngularCompilerPlugin({
tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
entryModule: path.resolve(__dirname, './src/app/app.module#AppModule'),
mainPath: path.resolve(__dirname, './src/main.ts'),
})
]
};
Looking at the bundles with BundleAnalyzerPlugin, the stat size of node_modules is 1.52 MB for both projects, but the angular-cli's parsed size is 238 KB vs 441 KB for Webpack's. From what I can tell, there is about 100 KB of difference in the node_modules, even though the packages, such as rxjs, are the same version.
What is going on, and how can I achieve the same level of optimization for both projects?
It looks like the issue in the Webpack project was that the tsconfig "module" setting was "commonjs". Changing it to "es2015", like defaulted in an angular-cli app, now compiles the app down to 248 KB.