{"action":"opened","issue":{"url":"https://api.github.com/repos/highcharts/highcharts/issues/11931","repository_url":"https://api.github.com/repos/highcharts/highcharts","labels_url":"https://api.github.com/repos/highcharts/highcharts/issues/11931/labels{/name}","comments_url":"https://api.github.com/repos/highcharts/highcharts/issues/11931/comments","events_url":"https://api.github.com/repos/highcharts/highcharts/issues/11931/events","html_url":"https://github.com/highcharts/highcharts/issues/11931","id":492004420,"node_id":"MDU6SXNzdWU0OTIwMDQ0MjA=","number":11931,"title":"Bundle size increase after v6 to v7 upgrade","user":{"login":"ZachJW34","id":25158820,"node_id":"MDQ6VXNlcjI1MTU4ODIw","avatar_url":"https://avatars1.githubusercontent.com/u/25158820?v=4","gravatar_id":"","url":"https://api.github.com/users/ZachJW34","html_url":"https://github.com/ZachJW34","followers_url":"https://api.github.com/users/ZachJW34/followers","following_url":"https://api.github.com/users/ZachJW34/following{/other_user}","gists_url":"https://api.github.com/users/ZachJW34/gists{/gist_id}","starred_url":"https://api.github.com/users/ZachJW34/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ZachJW34/subscriptions","organizations_url":"https://api.github.com/users/ZachJW34/orgs","repos_url":"https://api.github.com/users/ZachJW34/repos","events_url":"https://api.github.com/users/ZachJW34/events{/privacy}","received_events_url":"https://api.github.com/users/ZachJW34/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-09-11T04:02:03Z","updated_at":"2019-09-11T04:02:03Z","closed_at":null,"author_association":"NONE","body":"#### Expected behaviour\r\n\r\nThe bundle size for the upgrade of highcharts v6 to v7 should be small.\r\n\r\n#### Actual behaviour\r\n\r\nThe bundle size increased by over 300kb.\r\n\r\n#### Context\r\n\r\nMy company uses Highcharts in an Angular repo. The code below shows how Highcharts was initialized for v6:\r\n```typescript\r\nimport * as Highcharts from 'highcharts/highstock';\r\nimport * as HighchartsMore from 'highcharts/highcharts-more';\r\nimport * as Exporting from 'highcharts/modules/exporting';\r\n\r\n#### Context\r\n// More modules\r\n\r\nHighchartsMore(Highcharts);\r\nExporting(Highcharts);\r\n// More Factory\r\n\r\nexport default Highcharts;\r\n```\r\n<img width=\"646\" alt=\"Screen Shot 2019-09-10 at 10 39 48 PM\" src=\"https://user-images.githubusercontent.com/25158820/64666450-fa4bfc00-d41b-11e9-8d02-7e2a43b78550.png\">\r\n\r\nWith the upgrade to v7, this changed to:\r\n```typescript\r\nimport * as Highcharts from 'highcharts/highstock';\r\nimport HighchartsMore from 'highcharts/highcharts-more';\r\nimport Exporting from 'highcharts/modules/exporting';\r\n\r\nHighchartsMore(Highcharts);\r\nExporting(Highcharts);\r\n\r\nexport default Highcharts;\r\n```\r\n<img width=\"797\" alt=\"Screen Shot 2019-09-10 at 10 44 49 PM\" src=\"https://user-images.githubusercontent.com/25158820/64666644-9ece3e00-d41c-11e9-966a-012ba00bd223.png\">\r\n\r\nWith webpack-bundle-analyzer, I can see that both `Highcharts.js` and `Highstock.js` is included when all I want is `Highstock.js`.\r\nI see there is a similar issue [here](https://github.com/highcharts/highcharts/issues/8667), but the issue is a bit stale and this issue seems recent as it involved the update from v6.2.0 to v7.2.0.\r\n\r\n#### Problem\r\n\r\nI dug into the code to wee why webpack would be bundling `highcharts.js` and I learned that by adding any module or add-on to Highcharts, such as `highcharts/highcharts-more` or `highcharts/modules/exporting` would cause webpack to bundle highcharts.js. What I believe is happening is that the UMD module definition between v6 and v7 has changed and now lists `highcharts.js` as a depednency for all modules for the AMD definition. Taking `highcharts/modules/exporting` as an example, the UMD definition changed from \r\n```javscript\r\n(function (factory) {\r\n\tif (typeof module === 'object' && module.exports) {\r\n\t\tmodule.exports = factory;\r\n\t} else if (typeof define === 'function' && define.amd) {\r\n\t\tdefine(function () {\r\n\t\t\treturn factory;\r\n\t\t});\r\n\t} else {\r\n\t\tfactory(Highcharts);\r\n\t}\r\n}\r\n```\r\nto\r\n```javascript\r\n(function (factory) {\r\n    if (typeof module === 'object' && module.exports) {\r\n        factory['default'] = factory;\r\n        module.exports = factory;\r\n    } else if (typeof define === 'function' && define.amd) {\r\n        define('highcharts/modules/exporting', ['highcharts'], function (Highcharts) {\r\n            factory(Highcharts);\r\n            factory.Highcharts = Highcharts;\r\n            return factory;\r\n        });\r\n    } else {\r\n        factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);\r\n    }\r\n}\r\n```\r\nIf I change the AMD definition to reflect the former, webpack no longer bundles `highcharts.js`. I do not believe this extra information in the AMD definition is needed, and could be a result of Highcharts using Typescript to compile down to a UMD module.\r\n\r\nNote that I can fix this problem by adding `highcharts: [\"node_modules/highcharts/highstock\"]` to my apps `tsconfig.json` paths, but this is not an ideal solution.\r\n\r\n"}}
{"actor":{"display_login":"ZachJW34"}}