Lodash is one of those utility classes many JavaScript developers uses. This modern JavaScript utility library delivering modularity, performance & extras. I agree with most of their marketing terms, but you might run in problems in case of performance when you use it the wrong way and bloat up your SPFx packages.
SharePoint Framework offers you a pretty solid project setup, but on the other hand, it doesn’t give you options to optimise the gulp, build or the webpack configuration.
The more web parts exist in a single project, the slower the build task become and all the code in the project will be compiled at once, instead of smaller incremental builds. Technical possible but not yet supported.
The good thing is that there are some options you can directly trigger from your web part code. Some of these options affect webpack others can be applied in ReactJS. Not only in case of build times but also case of user experience and web part performance.
The following configuration shows the webpack.js generated during the build process of a SPFx Hello World wep part. References to fixed path in the generated webpack config were replaced with the default way of resolving path. ( path.resolve(__dir ).
Sometimes there is the requirement to move files from your source code directory to the lib folder. These files can be images, JSON files or any imaginable asset that is not recognised by the build chain of SPFx.
There are two ways to achieve this one. One used gulp the other gets accomplished through the configuration of a copy-static-assets.json. Let me explain these to methods what scenarios suites best in which case.
My last blog post focused on the general installation and configuration of Handlebars together with SPFx. I haven’t explained much on the code I used. Now it’s time to go more into detail how to deal with Handlebar templates and the overall code of the web part.
I believe one on the most used front end tools in the web development world is out there is Moustache or Handlebars. It is easy to use; you can write native HTML and compelling too.
In the SharePoint world, many web parts directly show data on the page, and therefore this is the right weapon of choice to get fast going.
Right after the first version of SPFx become public available, I created a ticket in GitHub on how to use this front end tool. With the RC0 drop of the framework, a new functionality has become available that allows you to embed Handlebars through a so-called webpack loader. I was pretty excited when Pat Miller tweeted me about this.
Here is how to extend WebPack configuration in #spfx RC0 – https://t.co/UEBIe6zoHj . I think @StfBauer was asking about this a while ago.
— Pat Miller (@PatMill_MSFT) January 13, 2017
Let me show and explain what steps are required to make use of it in your next project.