I am currently facing an issue with two Angular projects that I have. One is developed using angular-cli, while the other one is built with Webpack and utilizes @ngtools/webpack. Both projects are based on Angular 7.1.4 and @angular-devkit 0.13.5. The code structure for both projects is identical to the initial app module/component generated by angular-cli.
The problem arises when comparing the bundle sizes of these two projects. The Webpack version generates a compressed app bundle of 450 KB, whereas the angular-cli's bundle size is only 238 KB. It's worth noting that without the TerserPlugin, the angular-cli's bundle expands to 1.51 MB, while Webpack's bundle grows to 1.62 MB.
For the angular-cli project, I use the following configuration when running "ng build --prod=true":
"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"
}
]
}
On the other hand, here is the configuration used in the Webpack project:
{
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'],
},
// Other rules...
}
Upon analyzing the bundles with BundleAnalyzerPlugin, it was observed that although the stat size of node_modules is similar (1.52 MB) in both projects, the parsed size differs significantly. The angular-cli project shows a parsed size of 238 KB, compared to 441 KB in the Webpack project. This difference in size seems to stem from approximately 100 KB variance in the node_modules directory, even though the versions of packages like rxjs are consistent across both projects.
Bundle analysis screenshots: https://i.sstatic.net/04rAA.png (angular-cli) https://i.sstatic.net/Du4TU.png (Webpack)
It appears that there is some level of optimization disparity between the two projects. How can I align the optimization levels for both the angular-cli and Webpack projects?