Webpack warnings

[parched]

Expected behavior

When running npm run build with nothing added to the basic template I expected to get no warnings about the bundle sizes

Current behavior

I get these warnings

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vendor.js (291 KiB)
  taskpane.js (1.13 MiB)

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create an add-in following these steps
2. npm run build

Context

• Operating System: Windows 10
• Node version: v16.1.0
• Office version:
• Tool version:

Failure Logs

npm run build

> office-addin-taskpane-react@0.0.1 build
> webpack --mode production

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
assets by status 1.56 MiB [emitted]
  assets by path *.js 1.55 MiB 4 assets
  assets by path *.html 959 bytes
    asset taskpane.html 695 bytes [emitted]
    asset commands.html 264 bytes [emitted]
  asset manifest.prod.xml 4.1 KiB [emitted] [from: manifest.xml] [copied]
  asset 1fda685b81e1123773f6.css 1.48 KiB [emitted] [immutable] [from: src/taskpane/taskpane.css]
assets by status 26.9 KiB [compared for emit]
  asset assets/logo-filled.png 11.6 KiB [compared for emit] [from: assets/logo-filled.png] (auxiliary name: taskpane)
  asset assets/icon-80.png 4.72 KiB [compared for emit] [from: assets/icon-80.png] [copied]
  asset assets/icon-128.png 4.58 KiB [compared for emit] [from: assets/icon-128.png] [copied]
  asset assets/icon-32.png 2.33 KiB [compared for emit] [from: assets/icon-32.png] [copied]
  asset assets/icon-64.png 2.06 KiB [compared for emit] [from: assets/icon-64.png] [copied]
  asset assets/icon-16.png 1.56 KiB [compared for emit] [from: assets/icon-16.png] [copied]
orphan modules 1.51 MiB [orphan] 664 modules
runtime modules 3.98 KiB 11 modules
modules by path ./node_modules/ 3.42 MiB
  modules by path ./node_modules/core-js/ 511 KiB 536 modules
  modules by path ./node_modules/@fluentui/ 2.73 MiB 344 modules
  modules by path ./node_modules/react-hot-loader/ 2.85 KiB 3 modules
  modules by path ./node_modules/react/ 6.7 KiB 2 modules
  modules by path ./node_modules/react-dom/ 117 KiB 2 modules
  modules by path ./node_modules/scheduler/ 5.12 KiB 2 modules
modules by path ./src/ 25.9 KiB
  modules by path ./src/taskpane/components/*.tsx 20.5 KiB 4 modules
  ./src/taskpane/index.tsx 3.2 KiB [built] [code generated]
  ./src/commands/commands.ts 2.16 KiB [built] [code generated]
./assets/logo-filled.png 42 bytes (javascript) 11.6 KiB (asset) [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 (291 KiB)
  taskpane.js (1.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 (291 KiB)
      vendor.js
  taskpane (1.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.52.0 compiled with 3 warnings in 20379 ms

[millerds]

I have a fix for this but I'm running into trouble with the unit tests working with the treeshaking added to the tsx files.

[parched]

@millerds do you mind sharing your fix even if the unit tests aren't working?

[millerds]

I created a draft PR of what the changes consist of at https://github.com/OfficeDev/Office-Addin-TaskPane-React/pull/97. The end to end tests pass, but the unit tests fail because of the more specific import statements. I didn't have any luck figuring out a change that would keep the tests, and haven't been able to spend much time on it recently.

[geoHeil]

Even more so I would expect to not see:

Please note, versions of this package with version numbers x.y.z and below have been deprecated as of 31-March-2022.

in particular not for MSFT office related packages.

[millerds]

When are you seeing that message?

[geoHeil]

that various packages are not up-to-date (part of MSFT core products) in particular:

npm WARN deprecated @types/webpack-dev-server@4.7.2: This is a stub types definition. webpack-dev-server provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/react-hot-loader@4.1.1: This is a stub types definition. react-hot-loader provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/keyv@4.2.0: This is a stub types definition. keyv provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/jwt-decode@3.1.0: This is a stub types definition. jwt-decode provides its own type definitions, so you do not need this installed.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @azure/arm-subscriptions@3.1.2: Please note, versions of this package with version numbers 3.1.2 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 4.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.
npm WARN deprecated @azure/arm-resources@4.2.2: Please note, versions of this package with version numbers 4.2.2 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 5.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.
npm WARN deprecated @azure/arm-storage@15.3.0: Please note, versions of this package with version numbers 16.1.2 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 17.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.
npm WARN deprecated @azure/arm-appservice@7.0.0: Please note, versions of this package with version numbers 9.0.0 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 10.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.
npm WARN deprecated @azure/arm-apimanagement@6.0.0: Please note, versions of this package with version numbers 7.2.0 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 8.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.
npm WARN deprecated @azure/arm-sql@7.1.2: Please note, versions of this package with version numbers 8.0.0 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 9.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.

I am talking in particular also about the Azure related libraries like:

npm WARN deprecated @azure/arm-resources@4.2.2: Please note, versions of this package with version numbers 4.2.2 and below have been deprecated as of 31-March-2022. We strongly encourage you to upgrade to version 5.0.0 or above to continue receiving updates. Refer to our deprecation policy: https://azure.github.io/azure-sdk/policies_support.html for more details.

[Rick-Kirkham]

I think part of the problem is that the vendor code is being included in both the vendor bundle and the taskpane bundle.

[millerds]

The problem was that vendor was getting built, but taskpane was not using it as a reference, but including everything directly. I've checked in a change in master branch to fix this. It will be part of the template the next time we push officially to yo-office.