-
Notifications
You must be signed in to change notification settings - Fork 81
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Moment #13
Comments
How big is big? As we cache JS stuff pretty agressively. |
~1/4 MB according to https://github.com/jmblog/how-to-optimize-momentjs-with-webpack#measurements. |
1/4 like 0.25 or 1-4MB? ^^ |
250kB :D |
For a component that only display a relative date, this is crazy ^^" |
Yes, kind of. But the main lib is tiny. It's just the translations that make it a huge bundle of small packages that, apparently, sum up a lot.
I doubt it. We would have to provide our own translations. So I'd simply go with the slighly oversized moment.js now and we can always replace the underlying library if we find a replacement. Users of the component wouldn't and shouldn't notice. |
We could use the |
But then we'd have to translate all moment strings ourselves. If we go with the existing package, it already has all the translation strings. |
Again, let's start with something simple (existing, big momentjs thingy) and we can always replace that by our own code. To make progress, I'd like to keep things as simple as possible now. |
Is there that many translations needed? I mean, it's like any other translation son our website? |
the thing is, this will be included like 10 times in the end?
Well Days in long and short (Mon. Monday), same for months (dec. december), etc. |
But yeah im fine with a huge bump at the moment and fixing it properly afterwards |
Looking at the moment lib, I'm pretty sure we can ship this with a dynamic load of the locale. So moment (48.9KB) + locale (avg 1.5KB) we should be fine. |
Small references: alternative lib that does the same and is as supported: https://github.com/date-fns/date-fns/ And webpack reference for moment: https://webpack.js.org/plugins/ignore-plugin/#ignore-moment-locales |
Small update, I successfully implemented moment into contacts. |
On you entry file: // CSP config for webpack dynamic chunk loading
// eslint-disable-next-line
__webpack_nonce__ = btoa(OC.requestToken)
// Correct the root of the app for chunk loading
// OC.linkTo matches the apps folders
// OC.generateUrl ensure the index.php (or not)
// eslint-disable-next-line
__webpack_public_path__ = OC.generateUrl(OC.linkTo('contacts', 'js/')) Webpack config: output: {
[...]
chunkFilename: 'chunks/[name].js'
},
[...]
plugins: [
[...]
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
], Babel config {
[...]
"plugins": ["@babel/plugin-syntax-dynamic-import"]
} Then just import import('moment/locale/' + this.locale)
.then(e => {
// success
})
.catch(e => {
// failure
}) |
Correction: // We do not want the index.php since we're loading files
__webpack_public_path__ = OC.linkTo('contacts', 'js/') |
As discussed at #9 (comment), I'd like to see a component for the moment.js integration, a.k.a. x seconds/minutes/hours ago thingy.
The existing Vue components suggested didn't work as expected, esp. in regards to l10n. Moreover, they wouldn't work with our live timestamp update magic (cc @nickvergessen). Hence, I've created my own component. This is what it looks like:
It works well and can be easily integrated. The live updating also seems to work with this.
Caveats
The text was updated successfully, but these errors were encountered: