Webpack - Huge bundle.js file due to FullCalendar

Question

I'm using Fullcalendar & Moment.js to build a simple interactive calendar using JSON data. I'm using Webpack 2 to bundle my JS into one file. Below is a simplified version of my webpack.config.js file (the full thing is loading in much more than this).

var webpack = require('webpack');

var bower_dir = __dirname + '/library/bower_components';

var config = {
    resolve: {
        alias: {
            jquery: bower_dir + '/jquery/src/jquery.js',
            vue: bower_dir + '/vue/dist/vue.js',
            fullCalendar: bower_dir + '/fullcalendar/dist/fullcalendar.js',
            moment: bower_dir + '/moment/moment.js',
        }
    },

    entry: {
        app: './library/js/main.js'
    },

    output: {
        path: __dirname + '/dist/library/js',
        filename: "bundle.js"
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Vue: 'vue'
        }),
    ],

    module: {
        noParse: /moment.js/
    }

};

module.exports = config;

I've noticed that my bundle file dramatically increased in file size after both of these were included. I read about similar issues with Moment here and implemented the changes which reduced my uncompressed bundle size from 2.13MB to 1.83MB.

When running the output of webpack --json through the Webpack Visualiser I notice that Full Calendar is still accountable for a huge percentage of the file size, more so than any of the other libraries I'm including (23.7%, the next highest is jQuery at 15.8% and then Vue.JS at 15.4%).

I'm wondering if anyone knows of any way I can reduce this file size? I currently run webpack -p in production which reduces the size down to 656kB but this still seems like a lot.

The only real way to reduce the size is to roll out your on calendar module that only includes the functionality you need. Or if the full calendar has a option to specify — Callum Linington, Apr 03 '17 at 08:07
See the [guides section](https://webpack.js.org/guides/code-splitting-libraries/) to code splitting.... — Callum Linington, Apr 03 '17 at 08:09

score 2 · Answer 1 · answered Jun 17 '18 at 10:29

Use webpack config file and configure IgnorePlugin to exclude all locale files:

var webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  ...
};

You might need some locales. To have theem you can import them in your code:

import moment from 'moment'
import 'moment/locale/fr'

score 0 · Answer 2 · answered Apr 07 '17 at 20:23

Have you considered using CDN versions for both jQuery and Fullcalendar? First of all, those are more likely to be cached by your users' browsers (jQuery for sure, given that many sites use it) and also caching of those libs will become independent from your dev cycle, which might speed up things on repeated page loads. Don't know how you do caching, but because Fullcalendar and jQuery are part of your bundle, every time you change the bundle the user has to re-download those libs as well. Using an existing CDN removes that issue.

Also if you're using babel for JS transpilation, maybe try out Webpack 2 and with some minimal babel config adjustment you get tree-shaking, which might reduce the size of the bundle as well.

score 0 · Answer 3 · answered Apr 10 '17 at 07:02

Config

entry: {
  moment: bower_dir + '/moment/moment.js',
  fullcalendar: bower_dir + '/fullcalendar/dist/fullcalendar.js',
  app: './library/js/main.js'
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Vue: 'vue'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: ['moment', 'fullcalendar', 'manifest']
  })
]

Assuming that you absolutely need to serve those library dependancies from your application serve (instead of CDN), then we need to code split and ensure we're separating common libraries that are required/imported within your code base.

Alternatively, you can also reduce the file size by minifying your bundle but i'm assuming that you already know how to do that.

Webpack - Huge bundle.js file due to FullCalendar

3 Answers3