{"id":3106,"date":"2024-02-19T01:06:55","date_gmt":"2024-02-19T00:06:55","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3106"},"modified":"2024-03-19T10:45:14","modified_gmt":"2024-03-19T09:45:14","slug":"angular-bundle-how-to-reduce-style-size-in-bundle","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2024\/02\/19\/angular-bundle-how-to-reduce-style-size-in-bundle\/","title":{"rendered":"Angular Bundle , How to reduce stylesheet size (in Bundle) ?"},"content":{"rendered":"\n

Building applications\/websites using Angular<\/code> has a downside – the bundle size<\/strong>. This directly affects the loading speed and user experience of our projects. Reducing the bundle size<\/strong> is important.<\/p>\n\n\n\n

Let\u2019s learn how we can load stylesheets only when needed without making them part of the application bundle.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Case study<\/h4>\n\n\n\n

Let\u2019s assume that apart from the main styles.css<\/em> file, we have 2 theme files present:<\/p>\n\n\n\n

  • src\/styles\/themes\/theme-light.scss<\/li>
  • src\/styles\/themes\/theme-dark.scss<\/li><\/ul>\n\n\n\n

    Next, we would have them in angular.json<\/code> ‘s styles option:<\/p>\n\n\n\n

    \"styles\": [\n    \"src\/styles.css\",\n    \"src\/styles\/themes\/theme-light.scss\",\n    \"src\/styles\/themes\/theme-dark.scss\"\n  ]<\/code><\/pre>\n\n\n\n
    And lastly, we would handle the loading of a particular theme based on the users\u2019 choice or their preferences.<\/p>\n\n\n\n
    Everything works great, but both of our theme files are part of our application bundle all the time<\/strong>, and this can increase the size of a bundle, which we want to avoid<\/p>\n\n\n\n
    Exclude Theme Files<\/h4>\n\n\n\n
    Let\u2019s make a minor change in angular.json to exclude theme files from the bundle:<\/p>\n\n\n\n
    \"styles\": [\n    \"src\/styles.css\",\n    {\n      \"input\": \"src\/styles\/themes\/theme-light.scss\",\n      \"inject\": false,\n      \"bundleName\": \"theme-light\"\n    },\n    {\n      \"input\": \"src\/styles\/themes\/theme-dark.scss\",\n      \"inject\": false,\n      \"bundleName\": \"theme-dark\"\n    }\n  ]<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Two new options to learn here:<\/p>\n\n\n\n
    1. inject<\/strong><\/code>: Setting this false will not include the file from “input” path in bundle<\/li>
    2. bundleName<\/strong><\/code>: A separate bundle will be created containing the stylesheet from “input” path<\/li><\/ol>\n\n\n\n
      Now if we try to build the project, it will create separate files and the output will look something like below:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      After we build, we can locate our two files, theme-light.css<\/code><\/em><\/strong> and theme-dark.css<\/code><\/em><\/strong>, inside the dist\/<\/code> folder.<\/p>\n\n\n\n
      Notice that theme-light.css<\/code> <\/strong>and theme-dark.css<\/code> <\/strong>are part of Lazy Chunk Files<\/strong>. Lazy chunk files speed up the application load time, because they are loaded on demand.<\/p>\n\n\n\n
      <\/p>\n\n\n\n
      Lazy Load Theme Files<\/h4>\n\n\n\n
      We managed to exclude them from the bundle and they are externally available. Now the question arises how to load these theme files?<\/p>\n\n\n\n
      Within the ngAfterContentInit()<\/code> method of app.component.ts<\/code>, we define a new function<\/strong> named appendStyle()<\/code>:<\/p>\n\n\n\n
      \/\/ app.component.ts\nngAfterContentInit() {\n  \/\/...\n  function appendScript() {\n    \/\/Here we can append script as well\n  }\n  function appendStyle(name: string) {\n    let style = document.createElement(\"link\");\n    style.rel = \"stylesheet\";\n    style.type = \"text\/css\";\n    style.href = name;\n    document.head.appendChild(style);\n  }\n}\n<\/code><\/pre>\n\n\n\n
      Now, we use appendStyle()<\/code> function to lazy load<\/strong> theme_styles.scss<\/code> by calling it within the window.onload<\/code> event. For example, let’s say we want to load theme-dark.scss <\/em><\/strong>stylesheet:  ( we will use the .css<\/strong> extension, because the .scss <\/strong>was transpiled during the build process)<\/p>\n\n\n\n
      \/\/ app.component.ts\n  ngAfterContentInit() {\n    \/\/...\n    window.onload = () => {\n      \/\/...\n      appendStyle('theme-dark.css');\n    };\n  }\n<\/code><\/pre>\n\n\n\n
      Complet code here: <\/p>\n\n\n\n
      \/\/ app.component.ts\nngAfterContentInit() {\n window.onload = () => {\n\n      appendStyle('theme-dark.css');\n    };\n\n  function appendStyle(name: string) {\n    let style = document.createElement(\"link\");\n    style.rel = \"stylesheet\";\n    style.type = \"text\/css\";\n    style.href = name;\n    document.head.appendChild(style);\n  }\n}<\/code><\/pre>\n\n\n\n
      <\/p>\n\n\n\n
      PS: <\/strong>The window.onload<\/code> event is fired when the entire website loads.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Building applications\/websites using Angular has a downside – the bundle size. This directly affects the loading speed and user experience of our projects. Reducing the bundle size is important. Let\u2019s learn how we can load stylesheets only when needed without making them part of the application bundle. Case study Let\u2019s assume that apart from the main styles.css file, we have 2 theme […]<\/p>\n","protected":false},"author":1,"featured_media":3108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[798,667,797,127,794,795,796,792,793],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3106"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3106"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3106\/revisions"}],"predecessor-version":[{"id":3146,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3106\/revisions\/3146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/3108"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}