Proposal: Replace moment.js with date-fns or Luxon.js

[martinandersen3d]

This thread purpose, is to discuss if it should be done.

Why? -> Bundle size, thats why :-)

When looking at the package size of moment.js, its "medium-huge"... https://bundlephobia.com/result?p=moment@2.24.0

Luxon is supposed to replace moment.js, with better webpack support (include what you need). Also made by the team of moment. They created Luxon, because it support new techologies, and they did not want to break moment.js

date-fns, same as luxon..

https://moment.github.io/luxon/ https://date-fns.org/

This is maybe a "nice" to have and not a "need" to have. But would be best practice.

Now.. it all comes down to browser compatibility and opinions. What is the general opinion on this?

:-)

[MatheusrdSantos]

The bundle size is a problem. I don't know if the unique reason is moment.js, and I do not have much experience at reducing bundle size of packages. However, if the bundle size can be reduced just changing from moment.js to Luxon, there's no problem in my point of view.

Luxon has a guide for moment users https://moment.github.io/luxon/docs/manual/moment.html.

Maybe we could also discuss here other ways to reduce the bundle size.

[martinandersen3d]

Also.. in vue-quick-chat/package.json, everything in Core-js is included.

https://bundlephobia.com/result?p=core-js@3.6.2

We can choose to include only the things that we need. Example from Core-js docs:

https://github.com/zloirock/core-js

[martinandersen3d]

The send icon:

Replace: vue-icon https://bundlephobia.com/result?p=vue-icon@2.1.1

With this: We can include only ONE icon here:

---

This is just a Proposal, to optimize bundlesize. Hehe.. I dont know if it is nice or worse :D

[martinandersen3d]

Icon alternative: https://codepen.io/martinandersen3d/pen/vYEdERg

just include the icon as raw html.. its 300 bytes :D

[MatheusrdSantos]

Thanks, @martinandersen3d. I will apply these changes as soon as possible.

[MatheusrdSantos]

Today I changed the icon package from vue-icon to vue-material-design-icons (the same suggested before), and I got a small improvement on the bundle size. Initial size after changes

[martinandersen3d]

The icon is the smallest of the changes I guess.

Try checkout this extension for vscode

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

[MatheusrdSantos]

The bundle size still large. I guess the problem is with some js lib since the dist/vue-quick-chat.commom.js has 709.27 KiB, and the recommended limit size is 244 KiB.

The next change I'll apply is migrating from moment.js to Luxon.js

[martinandersen3d]

I have not tried this yet, but looks usefull

https://www.npmjs.com/package/webpack-bundle-analyzer

[MatheusrdSantos]

Thanks, I'll use these tools.

[MatheusrdSantos]

Hi, @martinandersen3d. Today I migrated from momentjs to Luxonjs, and I got a significant improvement in the bundle size. However, it still warning about the bundle size. I'll try to fix core-js.

[martinandersen3d]

on "Dev branch":

I fumbled a little to get it to work.. but it was something like this:

Cmd (run as admin)

npm install -g @vue/cli

npm i webpack-cli @webpack-cli/init

I used this one instead https://www.npmjs.com/package/vue-cli-plugin-webpack-bundle-analyzer

npm i vue-cli-plugin-webpack-bundle-analyzer --save-dev

this guy does not provide an exact guide, but gives some clue to how it work. https://www.youtube.com/watch?v=ltlxjq4YEKU

• Sorry for misspells.. i'm in a rush :D