Site icon Office 365 Developer

SharePoint or Teams Apps with Azure CDN

As a default, the SharePoint Framework packages all code inside the SPPKG file that is deployed to the app catalog. In the example below, you can see that the package is almost 1 MB. Yikes! In the web world, that is a huge file.

The generated package includes your markup, CSS, and JavaScript. When your web part renders, SharePoint serves the static files. If you don’t care about performance, this might be fine.

Examples of when you might not worry about web part performance:

For most situations, of course, you want your web parts to execute as quickly as possible.

To improve the performance of your SharePoint/Teams SPFx app, consider using an Azure CDN to serve static content.

The Azure Content Delivery Network (CDN) is designed to send audio, video, images, and other files faster and more reliably to customers using servers that are closest to the users. This dramatically increases speed and availability, resulting in significant user experience improvements.

Note: You will need to have permissions to create new resources in Azure.

Use these instructions to create an Azure CDN profile and endpoint.

When you have completed these steps you can tell your SharePoint Framework project to serve static files from the Azure CDN. The following steps outline the process.

Notice the size of the SPPKG file is now only 11 kb!

When you deploy, notice that when you are prompted to ‘trust’ the solution, it indicates that the app will get contents from your CDN.

If you want to verify that static files are coming from the CDN, use developer tools (F12 on Chrome on Windows). View the Sources tab. You should see your CDN listed as a source, and you should see your static files being served from that location:

Exit mobile version