Webpack moment.js integration

I’m from the moment.js (http://github.com/moment) team, and some of our users that are also your users voice concerns that because of the way webpack is implemented all moment locale files (currently 104) are bundled together, and that increases the size of what is downloaded to the browser.

Recently there was a suggested “fix” in the moment code (moment/moment#3344), but then we figured it broke the require mechanism for other environments.

Also we happen to have no instructions on how to use moment and webpack (like here: http://momentjs.com/docs/#/use-it/).

Can you please give us a hand by saying what is the right way to use moment with webpack, so it won’t include all locale files if the user wants so. I hope this will decrease number of issues sent to both projects 🙂

Note: A webpack user suggested the following: moment/moment#1435 (comment) but nobody has documented it yet: moment/momentjs.com#269

Author: Fantashit

19 thoughts on “Webpack moment.js integration

  1. @ichernev thank you so much for reaching out. ❤️❤️❤️❤️

    We would be more than happy to help!!!

    A cool idea 💡 that might be worth investigating is helping you guys create a ‘example’ or ‘test’ fixture of a small use case of webpack and moment together with one or many locales.

    Pros:

    • the fixture can serve as a point of reference for users in regards to implementation
    • you can then run functional/integration smoke tests against this example for your test suite?

    Thoughts?

  2. @TheLarkInn hello, thank you for the prompt response.

    I like the fixture idea, we can take example from require.js documentation on our website, which mentions all the different (widely used) use-cases:

    http://momentjs.com/docs/#/use-it/require-js/

    Basically we’ll need examples for:

    • core only (no locales)
    • core with a single locale (known in advance)
    • core with all locales
    • care + dynamically loading locales (if that is applicable to webpack at all)
  3. FYI: This problem isn’t specific to moment.js. It would be nice to have a general recommendation how libs, which support multiple locales, should be used together with webpack. Other libs which I think of are https://github.com/andyearnshaw/Intl.js or https://github.com/angular/bower-angular-i18n. They don’t have a require which includes all locales, but all of them need to be handled with some custom logic in some way. It would be nice to generalize the way how locale specific files are loaded.

  4. It seems this issue got sidetracked regarding the proper use of moment with webpack to reduce bundle sizes, specifically within the constraints of create-react-app. Is there a final word on this? I kind of favor the typescript style when it comes to importing locales.

  5. Until this is fixed, my solution is to simply avoid including moment in the webpack bundle. Load it as a regular browser script:

    <script defer src="node_modules/moment/min/moment.min.js"></script>
    <script defer src="node_modules/moment/locale/en-gb.js"></script>
    

    Now you have moment in your web app at the cost of two requests and ~60Kb (as oppose to 0 additional requests but ~0.5Mb added to your bundle when using webpack).

  6. Guys this has been going on for a while and seems really easy to fix. Currently everyone who uses moment (awesome library btw) is including ALL the languages, which is insane, can we do something about it?

    For now lets say current behavior doesn’t change and those who want to reduce their footprint can do something like this?

    import moment form 'moment/core';
    import 'moment/locales/...';
    
  7. Hey guys, maybe you are looking something like this one

    new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(ru)$/)

    and BundleAnalyzerPlugin result is

    2017-04-05 11 24 54

  8. I resolved this issue in my project in a different way, I have used copy-webpack-plugin to copy all locale files to web root directory where my bundle files are exist.

    following is my webpack config

     
          new CopyWebpackPlugin([
            {
              context: 'node_modules/moment/locale',
              from: '**/*',
              to: './moment-locale/'
            },
            {
              context: 'node_modules/react-intl/locale-data',
              from: '**/*',
              to: './react-intl-locale/',
              ignore: ['index.js']
            }
          ]),
    

    In our application user can select any locale, so we need to load them dynamically. using above solution I can achieve that

    Cheers
    Kishore

  9. To the next person trying to get one of the above configurations to work (which they did not for me):

    While trying to fix things, I accidentally stumbled upon the documentation page for the ContextReplacementPlugin showing exact this case (momentjs) as an example and it worked fine for me 🙂

    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
    ]
    

    `

  10. Since this doesn’t really have anything to do with webpack at this point I think it’s best to close this issue. If anyone would like to create a guide on webpack.js.org they can submit a PR to GitHub.com/webpack/webpack.js.org

Comments are closed.