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

chore: disable emotion source maps in production builds #519

Merged
merged 1 commit into from
Feb 8, 2019

Conversation

montezume
Copy link
Contributor

Summary

Since refactoring to using emotion, the ui-kit bundle size bloated from ~600kb to ~2.1mb. This is due to babel-plugin-emotion created code that looks like this.

css("padding:", getPadding$1(props.scale), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2V0LXNxdWlzaC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQlkiLCJmaWxlIjoiaW5zZXQtc3F1aXNoLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB2YXJzIGZyb20gJy4uLy4uLy4uLy4uL21hdGVyaWFscy9jdXN0b20tcHJvcGVydGllcyc7XG5pbXBvcnQgZmlsdGVyRGF0YUF0dHJpYnV0ZXMgZnJvbSAnLi4vLi4vLi4vdXRpbHMvZmlsdGVyLWRhdGEtYXR0cmlidXRlcyc7XG5cbmNvbnN0IGdldFBhZGRpbmcgPSBzY2FsZSA9PiB7XG4gIHN3aXRjaCAoc2NhbGUpIHtcbiAgICBjYXNlICdzJzpcbiAgICAgIHJldHVybiBgJHt2YXJzLnNwYWNpbmc0fSAke3ZhcnMuc3BhY2luZzh9YDtcbiAgICBjYXNlICdtJzpcbiAgICAgIHJldHVybiBgJHt2YXJzLnNwYWNpbmc4fSAke3ZhcnMuc3BhY2luZzE2fWA7XG4gICAgY2FzZSAnbCc6XG4gICAgICByZXR1cm4gYCR7dmFycy5zcGFjaW5nMTZ9ICR7dmFycy5zcGFjaW5nMzJ9YDtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIDA7XG4gIH1cbn07XG5cbmNvbnN0IEluc2V0U3F1aXNoID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBwYWRkaW5nOiAke2dldFBhZGRpbmcocHJvcHMuc2NhbGUpfTtcbiAgICBgfVxuICAgIHsuLi5maWx0ZXJEYXRhQXR0cmlidXRlcyhwcm9wcyl9XG4gID5cbiAgICB7cHJvcHMuY2hpbGRyZW59XG4gIDwvZGl2PlxuKTtcblxuSW5zZXRTcXVpc2guZGlzcGxheU5hbWUgPSAnSW5zZXRTcXVpc2gnO1xuSW5zZXRTcXVpc2gucHJvcFR5cGVzID0ge1xuICBzY2FsZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbkluc2V0U3F1aXNoLmRlZmF1bHRQcm9wcyA9IHtcbiAgc2NhbGU6ICdtJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEluc2V0U3F1aXNoO1xuIl19 */"))

As you can see, when the consumer builds ui-kit in production they won't get the source maps, so it doesn't actually add bloat to our consumers. But I don't think we need to include these source maps on production ui-kit builds.

@montezume montezume requested review from emmenko and tdeekens February 8, 2019 10:00
@@ -63,11 +63,18 @@ module.exports = function getBabelPresets() {
'@emotion/babel-preset-css-prop',
].filter(Boolean),
plugins: [
[
require('babel-plugin-emotion').default,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

ref

Copy link
Member

@emmenko emmenko left a comment

Choose a reason for hiding this comment

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

Good catch! 👌

@montezume montezume merged commit 1cb3f19 into master Feb 8, 2019
@montezume montezume deleted the ml-emotion-fixes branch February 8, 2019 10:09
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.

3 participants