Packing react+redux for Deployment

The react and supporting ecosystem libraries are not small libraries. They carry a fairly heavyweight amount of code that must be delivered to the client--in many cases the browser.

Having said that, Dynamics now uses react and redux for their applications especially in the UCI. That may or may not continue, but they are sold pieces to work with.

If you have a form with multiple Web Resources that use React, this may amount to a downloading of many KBs of data over and over again. Dynamics CRM already is quite resource intensive and downloads a large amount of content. Of course, once the browser cache is warmed up, the download issue becomes less extreme and the content is cached.

You have a few choices on how to bundle vendor-related files.

• Bundle them into every Web Resource you create. This is the safest and most common approach. It is safe because its harder to create a situation where you are missing a dependency for any specific Web Resource. It's also a bit wasteful. This works even if you load your web resources directly into the parent of the WebResource iframe.

• Create a vendor.js-type file using webpack that bundles common dependencies, such as react, into a common .js file that multiple Web Resources can use. It is not common knowledge, but React is already included by MS in some top-level form logic but you still need to download your specific verson.

• Include common resources at the "form" level then "assume" that they are available via webpack "external" in your sub-frames via accessing global variables through a parent reference. This is the most fragile approach because you are downloading the dependencies only once, but you are telling webpack to assume they are available. You might need a glue .js file that just does a "var React = window.parent.parent.React;" type setup. This is also fragile because it assumes the ability to connect to the global React instance through a MS controlled structure of iframes---which could in the future although they probably would not. Do not use this aproach.

If the "client" has enough bandwidth for the initial download, the first option is the easiest, least fragile and the best option. It's also easy in webpack to implement the second option although you will need to adjust your shims and .html entry points appropriately. Use the first approach!