I18n-module: node-libs-browser included in bundle

[janKollars]

Version

nuxt-i18n: 6.15.3
nuxt: 2.14.7

Nuxt configuration

mode:

• [x] universal
• [] spa

Reproduction Link

https://codesandbox.io/s/nuxt-i18nnode-libs-browser-kyvgu

Steps to reproduce

execute yarn analyze and search for node-libs-browser in the client bundle

What is Expected?

There should be no node-libs-browser.

What is actually happening?

The opposite

[janKollars]

I replaced deepcopy with lodash deepclone. clone-deep is even smaller than lodash deepclone but has dependencies.

[JBustin]

Hello

The replacement between deepcopy and lodash.deepclone has increased the library size.
It seems that the gain to remove node-libs-browser is smaller that the increase of size :/

nuxt-i18n v6.15.1                                 
=> nuxt-i18n v6.15.4

vendors/app.da22972.js (33.05 KB) 
=> vendors/app.5c8f602.js (33.96 KB)

deepcopy (2.34 KB)                          
=> cloneDeep (3.14 KB)

Regards

[rchl]

The main point of this change for me was fixing an issue with deepcopy causing problems on the client-side (#907). I would say that the increase of less than 1KB is acceptable.

[divine]

@rchl 👋, maybe it would be better to use https://github.com/lukeed/klona, according to benchmarks it looks much faster and less in size ?

I can push PR if you want.

Thanks!

[rchl]

@divine sounds good to me. That library looks nice.

[janKollars]

Hi @JBustin I am curious how you performed your tests. I wanted to reproduce your results but I could not.
I will share my findings using the project from the codesandbox link above and changing only the version of nuxt-i18n.

nuxt-i18n version | vendors/app bundle | total bundle | vendros/app modern | total modern
--- | --- | --- | --- | ---
6.15.3 | 161.11 / 61.16 | 847.41 / 296.83 | 156.4 / 59.5 | 708.43 / 248.22
6.15.4 | 120.37 / 41.99 | 784.55 / 268.66 | 120.37 / 41.98 | 672.9 / 231

The sizes are in KB and taken from the Webpack bundle analyzer (stat / parsed).
Lodash.clonedeep itself is considerably bigger than deepcopy. But the node-libs-browser which slides into the vendors/app bundle ruins this benefit.

@divine this seems to be a great replacement!

[JBustin]

I use https://www.npmjs.com/package/webpack-bundle-analyzer from my nuxt project.
Result is pretty clear.
I think that depends if you already use lodash.clonedeep in your project or not.