I thought I'd share a few foundational tips that I wish I'd had from the beginning.
1) Install and use "pnpm" instead of "npm" whenever possible -- and it has always been possible, in my experience. There was so much wasted disk space (and consequently time) to be saved by doing this. I was able to delete gigabytes and gigabytes of pointless node_modules directories, and pnpm replaced them with directory junctions managed from a central location in %AppData% or similar locations for linux and mac.
Every 'yo' commands may undermine your time & disk savings, when it uses "npm" by default. Add "--package-manager pnpm" to your 'yo' commands to avoid wasteful executions and package installations. If you're a bash user, you can make it impossible to forget, with something like this in your .bash_profile:
YO=$(which yo)
yo (){
$YO "$*" --package-manager pnpm
}
2) Install and use "spfx-fast-serve". When you're editing files and saving changes frequently, "gulp serve" reloads more slowly than necessary. spfx-fast-serve sets up a working directory for you to use "pnpm run serve" instead of "gulp serve". The time saved is tremendous. "gulp serve" would normally load your changes and have the updated content served for your workbench pages within 30-60 seconds, but spfx-fast-serve got that down to between 3 - 12 seconds. It is quick and easy to set up.
3) Assuming you review your commits (and I recommend you do), "git diff" can show you a completely unmanageable mess unless you create a ".gitattributes" file in your project roots. This can tell git to stop showing diffs for any machine generated files that are committed. Most git users are aware that the .gitignore is where you list most machine-generated content, but with node development, you aren't supposed to .gitignore the package-lock.json or equivalent files for other package managers. In my own .gitattributes file, I also added a line for jquery*.js, because of some upstream files that were committed with some of the sp-dev-fx-* samples.
.gitattributes:
*.min.* -diff
package-lock.json -diff
yarn.lock -diff
pnpm-lock.yaml -diff
That is something I always add to my first commit in a new SPFX project. If you ever do need to try and read through changes the package lock file, you could temporarily delete any of these lines from the .gitattributes file, and just don't commit that change.
I hope that helps somebody out there. Maybe leave a note if it does?
