Slim down the React build

I created a brand new React-TypeScript addin using the yo office generator. The sample project, without any changes results in almost 3 MB of JS output. This seems like an important problem since I assume a lot of people will be starting with this generator, and we might see big addins that might slow down Office apps.

Here is what npm run build displays:

                                    Asset       Size  Chunks                    Chunk Names
              app.84c970d255d072636045.js   1.19 MiB       0  [emitted]  [big]  app
          app.84c970d255d072636045.js.map   3.87 MiB       0  [emitted]         app
                       assets/icon-16.png   1.56 KiB          [emitted]         
                       assets/icon-32.png   2.33 KiB          [emitted]         
                       assets/icon-80.png   4.72 KiB          [emitted]         
                   assets/logo-filled.png   11.6 KiB          [emitted]         
    function-file.84c970d255d072636045.js   1.12 KiB       1  [emitted]         function-file
function-file.84c970d255d072636045.js.map   4.92 KiB       1  [emitted]         function-file
         function-file/function-file.html  830 bytes          [emitted]         
                               index.html  841 bytes          [emitted]         
           vendor.84c970d255d072636045.js   1.06 MiB       2  [emitted]  [big]  vendor
       vendor.84c970d255d072636045.js.map   3.87 MiB       2  [emitted]         vendor

Summary of Problems:

• The current React template loads office-fabric and ui-fabric twice, both in app.js and in vendor.js. It is ignoring that it has been loaded into vendor.js and it is being included in app.js as well.
• No tree shaking for office-fabric, even if you use a button, it seems to load the whole library.

I enabled the webpack-bundle-analyzer https://www.npmjs.com/package/webpack-bundle-analyzer and here is the report it generated on the production build:

Some suggestions for improvement:

• splitChunks’s chunks property is “async”, changing this to “all” helps a little.
• entry point is an array that includes react-hot-loader, having an array seems to disable some of webpack’s optimizations. See https://github.com/OfficeDev/office-ui-fabric-react/issues/7581#issuecomment-467585503
• Importing from the internals of the library helps. If I change import { Button, ButtonType } from “office-ui-fabric-react”; to import { Button, ButtonType } from “office-ui-fabric-react/lib/Button”; it seems to just import the Button. I think webpack should be handling this, but there is something lost in translation, so this optimization is not done automatically for some reason.
• Also see https://github.com/OfficeDev/office-ui-fabric-react/issues/7581 which discusses similar issues.

[daniesy]

Selective imports worked and shrank everything way down for me. Strangely enough, this is how Microsoft recommends using the fabric ui library in some guides. You just need to be careful to do it everywhere in your project. Also, you don’t need to remove the whole vendor part from webpack.config.js, deleting theoffice-ui-fabric-react should be enough. I had to remove the fabric.min.css from the taskpane code as well, freeing up 800kb.

This way I got from:

taskpane.js (2.32 MiB)
vendor.js (1.18 MiB)

down to:

taskpane.js (399 KiB)
vendor.js (252 KiB)

[TCourtneyOwen]

@ustun Thanks for opening this issue. We realize this is a problem with the React template and will open a work item on our end to address this issue in the near future

Thanks,

Courtney