Hello all,
i'm pretty new to the angular ecosystem.
I am using Sentry server to track errors thrown by my application. Unfortunately the javascript chunk files generated by my Angular 11 project are too large to be efficiently processed by my installation.
Therefore I'm trying to configure an Angular project to not create chunks larger than e.g. 200KB using the Angular built-in SplitChunksPlugin.
Basically this works if I add the "optimization" structure in my "customWebpackConfig".
Unfortunately this has the disadvantage that when generating my index.html the references to my CSS files and most of my javascript chunks are missing.
What is the best practice way to configure SplitChunksPlugin without breaking the default behavior.
angular.json
{
"version": 1,
"projects": {
"messenger": {
"projectType": "application",
"schematics": {
"@nrwl/angular:component": {
"style": "scss"
}
},
"root": "apps/messenger",
"sourceRoot": "apps/foo/src",
"prefix": "foo",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"replaceDuplicatePlugins": true
},
"outputPath": "dist/default",
"index": "apps/foo/src/index.html",
"main": "apps/foo/src/main.ts",
"polyfills": "apps/foo/src/polyfills.ts",
"tsConfig": "apps/foo/tsconfig.app.json",
"aot": true,
"assets": ["apps/foo/src/assets"],
"styles": ["apps/foo/src/styles.scss"],
"stylePreprocessorOptions": {
"includePaths": ["libs/shared/styles/src/lib"]
},
extra-webpack.config.js
const { InjectManifest } = require('workbox-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
minChunks: 9,
maxInitialRequests: 19,
maxAsyncRequests: 29,
minSize: 99999,
maxSize: 199999,
enforceSizeThreshold: 119999,
}
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'apps/messenger/src/index.html',
showErrors: true,
}),
new InjectManifest({
swSrc: 'dist/service-worker.js',
swDest: `service-worker.js`,
compileSrc: false,
maximumFileSizeToCacheInBytes: 50000000,
}),
]
}
The diff between the index.html with and without the optimization configuration looks like this:
$ diff -u index-without-acticated-optimization-config.html index-with-acticated-optimization-config.html |sed '~s,flip-root,foobar-root,g'
--- index-without-acticated-optimization-config.html 2021-05-16 12:48:56.409461873 +0200
+++ index-with-acticated-optimization-config.html 2021-05-16 12:46:35.905790852 +0200
@@ -20,7 +20,7 @@
<link rel="icon" type="image/png" href="assets/theme/icons/favicons/favicon-96x96.png" sizes="96x96"/>
<link rel="manifest" href="assets/tenant/manifest.json"/>
- <link rel="stylesheet" href="styles.c2478474b3fbc37b11ec.css"></head>
+ </head>
<body>
<noscript>
<div
@@ -48,5 +48,5 @@
</linearGradient>
</svg>
<foobar-root> </foobar-root>
- <script src="runtime-es2015.97090efd50524d776069.js" type="module"></script><script src="runtime-es5.97090efd50524d776069.js" nomodule defer></script><script src="polyfills-es5.23c58b44b91c23781d82.js" nomodule defer></script><script src="polyfills-es2015.bfc0d19950947f9e484a.js" type="module"></script><script src="vendor-es2015.8e1ef0067deec0ee52e2.js" type="module"></script><script src="vendor-es5.8e1ef0067deec0ee52e2.js" nomodule defer></script><script src="main-es2015.4b55af487645d54465f0.js" type="module"></script><script src="main-es5.4b55af487645d54465f0.js" nomodule defer></script></body>
+ <script src="runtime-es2015.739b4eb7c153a88dd0b6.js" type="module"></script><script src="runtime-es5.739b4eb7c153a88dd0b6.js" nomodule defer></script></body>
</html>
Top comments (0)