# Will Code Splitting per "Ember Addon" be possible next? **URL:** \ **Category:** Ember CLI\ **Created:** [April 16, 2018, 11:05am UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548 "2018-04-16T11:05:52Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Daniel\_Park](https://avatars.discourse-cdn.com/v4/letter/d/f07891/32.png) [@Daniel\_Park](https://discuss.emberjs.com/u/Daniel_Park)\ **Post date:** [April 16, 2018, 11:05am UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548/1 "2018-04-16T11:05:52Z")
Hi everyone, Our team have been working with Ember about 2 years and we are making healthcare system for cloud. and we are really appreciating to Ember team’s commitment and effort. We first used ember engine for dividing the app by “domain”, so we had benefit of lazy loading. But recently we had to decide changing ember engine to “ember addon” because of UI design & concept. Now we have only one (main) route and each “domain” is implemented as “ember addon”(exactly many components in it). there are hundreds of domain in the system Eventually, we want the followings. 1. we want to “lazy load” each domain(ember addon) when user click the menu 2. we also want to build and deploy each domain separately (Building app as whole takes tens of minutes) we are hoping those are possible by Ember team’s “code splitting” work and we want to know those are really possible in the following release of Ember CLI , if possible, WHEN we can use them. Could anyone give us some information? ---
**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\ **Post date:** [April 16, 2018, 1:28pm UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548/2 "2018-04-16T13:28:54Z")
I’m not 100% sure I understand the questions, but let me give it a shot… > [@Daniel\_Park](#): > > we want to “lazy load” each domain(ember addon) when user click the menu Here you are asking if it will be possible to make a “lazy non-engine addon”? If so, then I think the answer is essentially that this should become possible with the “packager” work that is currently underway (unsure at the moment just how “simple” it will be, still a few unknown unknowns here)… > [@Daniel\_Park](#): > > we also want to build and deploy each domain separately (Building app as whole takes tens of minutes) We are working (generally speaking) on many different ways to pre-build an addon so that the build times of host applications do not suffer. * * * Please check out the section on treeshaking and code splitting in: > [@Ember CLI, 2018 Edition](https://discuss.emberjs.com/t/ember-cli-2018-edition/14543): > > The Ember CLI team spent the day after EmberConf talking about our priorities for the upcoming year. We meet annually, and this time around we decided to publish the notes from our meeting to make sure our direction is transparent for everyone in the community. We [asked](https://discuss.emberjs.com/t/ember-cli-in-2018/14304) the Ember community beforehand for feedback on the issues and pain points with Ember CLI. We do want to thank everyone who participated. Your feedback is very valuable! Here’s a summarized list of the most anticipated features,… ---
**Author:** ![Daniel\_Park](https://avatars.discourse-cdn.com/v4/letter/d/f07891/32.png) [@Daniel\_Park](https://discuss.emberjs.com/u/Daniel_Park)\ **Post date:** [April 17, 2018, 1:05am UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548/3 "2018-04-17T01:05:11Z")
> [@rwjblue](#): > > lease check out the section on treeshaking and code splitting in: OK. Thanks a lot for your answer, You understand my question exactly. I meant, we are making “lazy non-engine addon” for each domain as you said. So everything that I mentioned is underway. And, I guess, you, Ember team hardly expect when the “packager” will be done at this moment… right? so all we need to do is waiting for this. ( actually we don’t want to do work around for this). ---
**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\ **Post date:** [April 17, 2018, 3:51am UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548/4 "2018-04-17T03:51:42Z")
> [@Daniel\_Park](#): > > I guess, you, Ember team hardly expect when the “packager” will be done at this moment… right? Yeah, sorry about that. I generally try to avoid estimates, doubly so for open source projects… ---
**Author:** ![siva\_abc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/siva_abc/32/16491_2.png) [@siva\_abc](https://discuss.emberjs.com/u/siva_abc)\ **Post date:** [September 3, 2018, 6:20pm UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548/5 "2018-09-03T18:20:17Z")
Here is a workaround that we are using for splitting the add-on(inrepo) code which is shared by engine and app. **Vendor (500KB) + Common addon files (50 KB)(Shared by App and engine).** Our requirement was to **split the common addon files** and to load it as **assets/common-vendor.js** **my-app/ember-cli-build.js** ```auto module.exports = { ... ... commonVendorTrees: [], // an array for all the common code shared by engine and app. } ``` * * * **common-addon/index.js** ```auto const calculateCacheKeyForTree = require("calculate-cache-key-for-tree"); // ... { treeForAddon(tree) { let app = this._findHost(); // finding the parent project. app.options.commonVendorTrees.push(this._super.treeForAddon.call(this, tree)); // empty return so that files of this addon will not be in vendor.js return; }, // cacheKeyForTree method needs to be overwritten as there is a check in ember-cli which will cause the addons to opt-out of the caching mechanism const calculateCacheKeyForTree = require("calculate-cache-key-for-tree"); cacheKeyForTree(tree) { let cacheKey = calculateCacheKeyForTree(tree, this); return cacheKey; } } ``` * * * **bundle-common-addon/index.js** (An addon to bundle the common files) ```auto { // merging all the commonVendorTrees and writing it in a single file. Using treeForPublic hook since it'll be called after treeForAddon. treeForPublic(tree) { let mergedTrees = broccoliMerge(this.app.options.commonVendorTrees, { overwrite: true }); let commonVendorTrees = new Concat(mergedTrees, { outputFile: 'assets/common-vendor.js' }); // removing the empty trees before merging return broccoliMerge([tree, commonVendorTrees].filter((row) => !!row)); } } ``` > We want to “lazy load” each domain(ember addon) when user click the menu You can try [ember-auto-import](https://github.com/ef4/ember-auto-import). Hope this helps you. ---
**Author:** ![eviltrout](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eviltrout/32/14169_2.png) [@eviltrout](https://discuss.emberjs.com/u/eviltrout)\ **Post date:** [September 22, 2020, 6:36pm UTC](https://discuss.emberjs.com/t/will-code-splitting-per-ember-addon-be-possible-next/14548/6 "2020-09-22T18:36:19Z")
@siva_abc your code splitting example worked great for me! One thing that stumped me for a little while is `calculateCacheKeyForTree` needs to be imported. I hope you don’t mind but I’ve used my admin powers on this forum to edit it into your example.