npm chart.js is big after minimization

Question

Using chart.js 2.5.0 and webpack 2.2.1, the resulting bundle after minimization is 357K. I've tried various options to Uglify, but not much seems to matter.

Using these files:

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
</head>
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>

src/app.js

import Chart from 'chart.js'
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`

webpack.config.js

const webpack = require('webpack')
const path = require('path')

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['es2015', { modules: false }]
                    ]
                }
            }]
        }]
    }
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --watch",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-es2015": "^6.22.0",
    "chart.js": "^2.5.0",
    "webpack": "^2.2.1"
  }

}

Example of running npm run build:

Hash: 72bbbb910dcee63f84e8
Version: webpack 2.2.1
Time: 3892ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  357 kB       0  [emitted]  [big]  main
 [109] ../~/chart.js/src/chart.js 1.91 kB {0} [built]
 [128] ../~/chart.js/src/core/core.helpers.js 30.2 kB {0} [built]
 [136] ../~/chart.js/src/core/core.ticks.js 7.03 kB {0} [built]
 [137] ../~/chart.js/src/core/core.title.js 5.39 kB {0} [built]
 [138] ../~/chart.js/src/core/core.tooltip.js 24.5 kB {0} [built]
 [139] ../~/chart.js/src/elements/element.arc.js 2.62 kB {0} [built]
 [140] ../~/chart.js/src/elements/element.line.js 5.32 kB {0} [built]
 [141] ../~/chart.js/src/elements/element.point.js 2.85 kB {0} [built]
 [142] ../~/chart.js/src/elements/element.rectangle.js 5.13 kB {0} [built]
 [144] ../~/chart.js/src/platforms/platform.js 2.83 kB {0} [built]
 [145] ../~/chart.js/src/scales/scale.category.js 3.73 kB {0} [built]
 [146] ../~/chart.js/src/scales/scale.linear.js 5.5 kB {0} [built]
 [147] ../~/chart.js/src/scales/scale.linearbase.js 2.69 kB {0} [built]
 [149] ../~/chart.js/src/scales/scale.radialLinear.js 16.2 kB {0} [built]
 [158] ./app.js 116 bytes {0} [built]
    + 144 hidden modules

Is there a pre-minified version in the package you could use? — adam0101, Feb 15 '17 at 15:20

score 8 · Answer 1 · answered Feb 15 '17 at 15:52

Turns out the issue is chart.js in npm depends on moment.js, which inludes about 250K of locales. The fix is to ignore these locale files:

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

More info here:

How to prevent moment.js from loading locales with webpack?

valdem · Answer 2 · 2020-01-15T15:26:22.280

As JOP explained, Chart.JS depends on moment.js package that has 250K with locales.

If you don't have dates in your chart data you can remove moment package completely from result bundle without replacing it with another package. Moment package just could be marked as an external dependency in webpack.

I.e. something like this, depending on you webpack configuration.

module.exports = {
  ...
  externals: {
    moment: 'moment',
  },
}

npm chart.js is big after minimization

2 Answers2