slides supporting the demonstration during the pnp call of December 5th

1. @pnp/office365-cli
o365 spfx project externalize
PnP Call December 2019
By: Vincent Biret

2. Passionate about technologies, development and community
Vincent Biret
@baywet
bit.ly/vince365
Microsoft Office Dev MVP
Azure and Office 365 developer @ 2toLead

3. The Problem
SharePoint Pages load a lot of things
Each additional SPFx component adds up
Optimizing is time consuming and difficult

4. The situation can quickly get out of control if you start adding a lot of customizations
A few examples
Vanilla SharePoint Communication page
SharePoint +
3 header extensions
1 footer extension
2 custom webparts

5. The goal of the new command is to make externals implementation as fast and painless
as possible
What solutions?
Selective imports
Eg pnpjs V2
Ideal for tree shaking
Developers have to be disciplined or it translates in big refactoring
Async module loading + chunks
Requires advanced JS/TS knowledge
Involves refactoring + heavy testing
Externals
Long “trial and error” period to find proper module replacement and CDN ref
Works well if you’re doing global imports (no refactoring)

6. Externalizing an existing codebase with the Office 365 CLI
Demo

7. The new command saves you a lot of time by automating tidious and repetitive tasks
Things the command does for you
1. Checks all dependencies (package.json)
2. Ensures CDN references match version spec
3. Tests the module type (AMD/UMD/ES6/global vars…)
4. Tries to obtain the minified version
5. Checks that the file exists
6. Generates the externals entry for your configuration

8. This new command is a great demonstration of the community at work!
Thanks
Velin Georgiev
@VelinGeorgiev
Waldek Mastykarz
@waldekm

9. Bit.ly/vince365 @baywet slideshare.net/VincentBIRET
Thanks!/Questions?
Vincent Biret
Office 365 and Azure
Developer, 2toLead
@baywet
Bit.ly/vince365