Skip to content
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

Migrate from Browserify to rollup #5904

Merged
merged 1 commit into from
Dec 14, 2018

Conversation

simonbrunel
Copy link
Member

@simonbrunel simonbrunel commented Dec 10, 2018

Creating this PR to discuss if it's worth switching to rollup now (v2) instead of waiting the next major release. This change optimizes our build sizes (see following table), anticipates the migration of our code to ES modules (#4478), allows us to generate ESM builds (#5179) without maintaining two separate build pipelines and should fixes a few issues (#2906 and #5901).

Browserify isn't optimal bundling Chart.js because it adds too many internal wrappers, doesn't handle external/global dependencies and doesn't provide a way to generate ESM builds. Therefore, it seems the right choice to switch to rollup.

We also have to switch to Terser instead of UglifyJS because this last one contains a breaking bug. Note that tests now use the exact same rollup config as our builds (the minified one) to ensure that the bundling and minification steps don't break anything. Finally, replace the gulp watch task by gulp build --watch to be consistent with the other unittest and docs watching syntax.

Browserify rollup
npm install 95s (1537 pkgs) 105s (1604 pkgs)
gulp build 4s 8s
Chart.js 418KB 400KB
Chart.min.js 159KB 155KB
Chart.bunble.js 565KB 547KB
Chart.bundle.min.js 211KB 207KB

I'm not sure why the build process is slower with rollup (maybe because we have to translate from CommonJS modules to ES6). For those who want to check/test both builds, here is the dist outputs:

chartjs-dist-browserify.zip
chartjs-dist-rollup.zip

Fixes #2906
Fixes #5901

rollup.config.js Show resolved Hide resolved
rollup.config.js Outdated
plugins: [
resolve(),
commonjs(),
terser({output: {comments: 'some'}})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How many comments does this leave behind?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only the copyright header but I changed it for something more explicit:

terser({
    output: {
        preamble: banner
    }
})

Browserify isn't optimal bundling Chart.js because it adds too many internal wrappers, doesn't handle external/global dependencies and doesn't provide a way to generate ESM builds. Therefore, it seems the right choice to switch to rollup, so move all the build process in `rollup.config.js` and make Gulp to execute `rollup -c`.

We also had to switch to Terser instead of UglifyJS because this last one contains a breaking bug. Note that tests now use the exact same rollup config as our builds (the minified one) to ensure that the bundling and minification steps don't break anything. Finally, replace the `gulp watch` task by `gulp build --watch` to be consistent with the other `unittest` and `docs` watching syntax.
@simonbrunel
Copy link
Member Author

@etimberg I also changed the copyright header to be more concise:

Before:

/*!
 * Chart.js
 * http://chartjs.org/
 * Version: 2.7.3
 *
 * Copyright 2018 Chart.js Contributors
 * Released under the MIT license
 * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
 */

After:

/*!
 * Chart.js v2.7.3
 * https://www.chartjs.org
 * (c) 2018 Chart.js Contributors
 * Released under the MIT License
 */

@benmccann
Copy link
Contributor

@simonbrunel can you share what the breaking bug is for uglify?

@simonbrunel
Copy link
Member Author

@benmccann I think it's this one mishoo/UglifyJS#3278 (and many similar per this comment). uglify-js doesn't seem maintained anymore, terser is a fork of uglify-es with overall better performances.

exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021
Browserify isn't optimal bundling Chart.js because it adds too many internal wrappers, doesn't handle external/global dependencies and doesn't provide a way to generate ESM builds. Therefore, it seems the right choice to switch to rollup, so move all the build process in `rollup.config.js` and make Gulp to execute `rollup -c`.

We also had to switch to Terser instead of UglifyJS because this last one contains a breaking bug. Note that tests now use the exact same rollup config as our builds (the minified one) to ensure that the bundling and minification steps don't break anything. Finally, replace the `gulp watch` task by `gulp build --watch` to be consistent with the other `unittest` and `docs` watching syntax.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] Time chart with moment.js breaks in Firefox extension Using moment.js with requireJS
4 participants