Shaking the Bamboo Tree: How Bamboo uses code-elimination techniques to make code more efficient

The concept of tree shaking has become increasingly important in the world of deploying web-based applications that use JavaScript. With the recent release of Bamboo’s Cloud Parts®, which are a suite of SharePoint web parts intended for use on both SharePoint online and on-premises, Bamboo uses this technique to decrease the size of their release bundles as well as to accelerate the rendering of the Cloud Parts®.

Tree Shaking and AOT

Tree Shaking is defined as a dead code elimination technique, where a static code analysis of the module syntax is performed to decide which parts of the Angular or other library modules need to be included in the final bundle. ECMAScript 2015 modules support import and export statements which allow for static code analysis and finding unused code. Angular CLI uses webpack2 along with UglifyJS to accomplish tree shaking. During the build process, webpack2 will mark the unused code and UglifyJS will remove it if it can determine it’s safe to remove and would not cause any side effects.

Traditional JavaScript uses Just in Time (JIT) compilation and runs in the browser. This turns out to be good if the application files are small as they can be downloaded and executed fast. But in case of angular, the JIT build is huge as it includes the angular compiler, along with other libraries. To handle this, Angular introduced Ahead-Of-Time (AOT) compilation. As the name suggests, Angular CLI will compile HTML templates into TypeScript code and then perform tree shaking, modification, and other optimization techniques to produce smaller and efficiently executable JavaScript code. AOT will significantly speed up the application, especially the startup time because the templates are compiled ahead of time which eliminates the need to include the angular compiler in the bundle. If you want to read more about the angular compiler you can refer to the angular AOT documentation.

While compiling and deploying Cloud Parts®, Bamboo enables tree shaking and minification by enabling the Ahead of Time compilation (AOT).

JIT: npm run build

AOT: npm run build – AOT

Angular CLI supports JIT when targeted to development environments to make it easier for developers. However, this version is not minified/uglified and does not include tree shaking. The AOT is built-in when targeted for the production environment and applies stricter rules which might lead to more compilation errors than the non-AOT build. This is actually advantageous since more errors are detected during the compilation process and can be fixed rather than errors showing up during runtime.

For third-party libraries, Angular to perform tree shaking if the libraries also support tree shaking. This means that the libraries must be written in ECMAScript 2015 or greater and with some metadata for the AOT builds. Most of our products use Kendo UI for Angular, which does support tree shaking and AOT.

To demonstrate the effectiveness of the AOT build, production (AOT) and development (non-AOT) builds were run for three Bamboo Cloud Part® products: List Rollup, Calendar Plus and Chart Plus, and the total size of the bundle files were compared. The results are shown in the chart below. For all three products, there was an approximately 70% decrease in the size of the bundles. When using the AOT build, the unused library modules were removed during the tree shaking process and minification/uglification lead to more compacted executable code, resulting in this significant reduction in size.

(NOTE: @angular/cli >= 1.6.3, node: 8.9.4, Angular 5.2.6, webpack: 3.11.0, typescript: 2.6.2 are the different versions of the components when the results were tabulated.)

Tree shaking techniques prove to be a big pay-off when offered JavaScript-based solutions online. Using Angular AOT, tree shaking, and minification, Bamboo was able to decrease the size of the release builds of Cloud Parts®, considerably speeding up the process of loading the bundles and application rendering time.

All SharePoint Versions

The web parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft® Office 365.

SharePoint 2013, 2016, 2019, Online (Office 365)

On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2013, 2016, 2019


Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.

Essentials Suite

Essentials Plus Suite

Bamboo Premier Suite

Project Management Suite

Knowledge Management Suite

External User Manager


For more information on our product suites, contact us.

Featured Services

SharePoint Health Check

A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

SQL Health Check

Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

My SharePointXperts

The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!