DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Scoopex
Scoopex

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.

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

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,
      }),
   ]
}
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>
     <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>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

๐Ÿค” Did you know?

๐ŸŒš You can turn on dark mode in Settings