When I create an Outlook Add-in using React Framework through the Yeoman generator, and without applying any modifications, if I run the npm run build I get a bundle of 13MB for the taskpane.js, it seems to me to be an outrage.
lanuski@MacBook-Air-de-Ana first-addin % npm run build
> [email protected] build
> webpack --mode production
assets by path assets/*.png 26.9 KiB
asset assets/logo-filled.png 11.6 KiB [emitted] [from: assets/logo-filled.png] [copied]
asset assets/icon-80.png 4.72 KiB [emitted] [from: assets/icon-80.png] [copied]
asset assets/icon-128.png 4.58 KiB [emitted] [from: assets/icon-128.png] [copied]
+ 3 assets
assets by path *.js 13.6 MiB
assets by status 13.4 MiB [big]
asset taskpane.js 13 MiB [emitted] [minimized] [big] (name: taskpane) 2 related assets
asset vendor.js 399 KiB [emitted] [minimized] [big] (name: vendor) 2 related assets
asset polyfill.js 197 KiB [emitted] [minimized] (name: polyfill) 2 related assets
asset commands.js 399 bytes [emitted] [minimized] (name: commands) 1 related asset
assets by path *.html 1.33 KiB
asset taskpane.html 1.05 KiB [emitted]
asset commands.html 280 bytes [emitted]
asset manifest.xml 4.06 KiB [emitted] [from: manifest.xml] [copied]
orphan modules 13.5 MiB [orphan] 1854 modules
runtime modules 2.51 KiB 7 modules
modules by path ./node_modules/ 16.7 MiB 2666 modules
modules by path ./src/ 20.9 KiB
modules by path ./src/taskpane/components/*.tsx 13.2 KiB
./src/taskpane/components/App.tsx 2.8 KiB [built] [code generated]
./src/taskpane/components/Header.tsx 2.13 KiB [built] [code generated]
./src/taskpane/components/HeroList.tsx 2.63 KiB [built] [code generated]
./src/taskpane/components/TextInsertion.tsx 5.59 KiB [built] [code generated]
./src/taskpane/index.tsx 2.16 KiB [built] [code generated]
./src/taskpane/taskpane.html 1.04 KiB [built] [code generated]
./src/commands/commands.ts 927 bytes [built] [code generated]
./src/taskpane/taskpane.ts 3.62 KiB [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
vendor.js (399 KiB)
taskpane.js (13 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
vendor (399 KiB)
vendor.js
taskpane (13 MiB)
taskpane.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.93.0 compiled with 3 warnings in 16738 ms
I would like to know if this is expected or if I am doing something wrong. If that is expected, what can I do to decrease the size?, as I am having performance problems since minute 0.
Thanks
Get a bundle of small size
fluenttags to your question. You should also consider creating an Issues on the fluent repo. Also, the webpack.config in the generated project is pretty generic. Webpack docs might provide info about shrinking the package size.