0

In my Nuxt app I need to treeshake not used Icons from local library. I am following instructions provided on webpack https://webpack.js.org/guides/tree-shaking/ but I still can see all icons provided by the library in the lighthouse source map, even though not all of them are used across the app.

nuxt.config.ts:

  optimization: {
    usedExports: true,
  },

package.json:

 "sideEffects": false,
Sonny49
  • 425
  • 3
  • 18
  • 1
    What is the library of icons used here? Nuxt will treeshake by default if the library have treeshabakle capabilities. – kissu Jul 19 '22 at 00:30
  • @kissu it is our own component's library which exports icons as well. So you mean that I don't need to tell NUXT to treeshake? What about lodash? By default lodash is provided in Nuxt and it imports all of it even though not used in project. That is another problem I am trying to solve which I think is related to icons – Sonny49 Jul 19 '22 at 00:34
  • The components library is built on Vue2 – Sonny49 Jul 19 '22 at 00:38
  • Here is an example on how to properly use `lodash-es`: https://stackoverflow.com/a/70394677/8816585 Then, if you properly export it, it should be treeshak'ed indeed. – kissu Jul 19 '22 at 00:48
  • what can you suggest to do in case of icons? – Sonny49 Jul 19 '22 at 00:49
  • I recommend using this for icons: https://github.com/antfu/unplugin-icons – kissu Jul 19 '22 at 01:06

0 Answers0