DEV Community


Posted on • Updated on

Limit Size of Angular/Webpack Chunks

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.


    "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/",
                        "aot": true,
                        "assets": ["apps/foo/src/assets"],
                        "styles": ["apps/foo/src/styles.scss"],
                        "stylePreprocessorOptions": {
                            "includePaths": ["libs/shared/styles/src/lib"]
Enter fullscreen mode Exit fullscreen mode


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,
Enter fullscreen mode Exit fullscreen mode

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>
@@ -48,5 +48,5 @@
         <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>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)