{"id":23544,"date":"2024-12-06T07:00:37","date_gmt":"2024-12-06T15:00:37","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=23544"},"modified":"2025-02-04T02:29:31","modified_gmt":"2025-02-04T10:29:31","slug":"boost-your-microsoft-365-app-performance-introducing-tree-shaking-in-teamsjs","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/boost-your-microsoft-365-app-performance-introducing-tree-shaking-in-teamsjs\/","title":{"rendered":"Boost your Microsoft 365 app performance: Introducing tree shaking in TeamsJS"},"content":{"rendered":"

Tree shaking is a JavaScript optimization that eliminates dead code. By using tree shaking when bundling your app for Microsoft 365, you can reduce your package size, leading to faster download and improved load time\u2014ultimately giving your users a smoother, more performant experience.<\/p>\n

With Microsoft Teams JavaScript client library (TeamsJS) version 2.31.0, we\u2019re excited to make the TeamsJS library fully tree-shakable! Previously, TeamsJS was bundled into a single, minified file, making it impossible to exclude unused parts and leading to unnecessary bloat. Now, with tree shaking support, you can bundle only the code you need, resulting in leaner, high-performance app packages. Get ready to boost your app’s efficiency and take your Microsoft 365 apps to the next level.<\/p>\n

Thanks to the new tree-shakable TeamsJS library, our app\u2019s bundle size has shrunk by 44%! It is going to load faster than ever for our users. This update is a game-changer for performance.” <\/em><\/strong><\/p>\n

\u2014 Microsoft Loop, Early Preview App Developer <\/em><\/strong><\/p>\n

How to use tree shaking with the new Tree-shakable TeamsJS<\/h2>\n

Using tree shaking with TeamsJS is simple. Just use your favorite bundler\u2014such as Webpack, Rollup, or any other that supports tree shaking\u2014to bundle your entire app package. When tree shaking is enabled, all unused TeamsJS code will be automatically removed in the final bundle.<\/p>\n

\"A<\/p>\n

For example, the barCode<\/code> module in TeamsJS contains four functions: hasPermission()<\/code>, isSupported()<\/code>, requestPermission<\/code>(), and scanBarCode(BarCodeConfig)<\/code>. If your app only uses the hasPermission()<\/code>\u00a0function, after tree shaking, the other three functions will be excluded from your bundle. This ensures that your app stays lightweight and only includes the code it truly needs.<\/p>\n

Special considerations<\/h2>\n

When using the new tree-shakable TeamsJS library, keep in mind the following:<\/p>\n

    \n
  1. If your app uses the CDN to consume the TeamsJS library, it will still be using the non-tree-shakable version of TeamsJS.<\/li>\n
  2. In making TeamsJS tree-shakable, we changed its library type from UMD (Universal Module Definition) to ESM (ECMAScript Modules). To avoid any breaking changes, we\u2019ll still offer the UMD version. If your bundler supports ESM, you\u2019ll be using the tree-shakable ESM package of TeamsJS; if not, the UMD package will be used instead.<\/li>\n<\/ol>\n

    Get started today<\/h2>\n

    We\u2019re thrilled to bring you this enhancement to TeamsJS, and we can\u2019t wait to see the impact it has on your apps. So go ahead, give it a try, and watch your Microsoft 365 apps reach new performance heights.<\/p>\n

    Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

    With Microsoft Teams JavaScript client library (TeamsJS) version 2.31.0, we\u2019re excited to make the TeamsJS library fully tree-shakable.<\/p>\n","protected":false},"author":165128,"featured_media":23551,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,128],"tags":[386],"class_list":["post-23544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","category-microsoft-teams","tag-teamsjs"],"acf":[],"blog_post_summary":"

    With Microsoft Teams JavaScript client library (TeamsJS) version 2.31.0, we\u2019re excited to make the TeamsJS library fully tree-shakable.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/23544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/165128"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=23544"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/23544\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/23551"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=23544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=23544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=23544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}