{"id":13805409,"url":"https://github.com/MiguelMadero/ember-cli-bundle-loader","last_synced_at":"2025-05-13T19:30:58.977Z","repository":{"id":44525806,"uuid":"54932555","full_name":"MiguelMadero/ember-cli-bundle-loader","owner":"MiguelMadero","description":"Addon to allow for multiple bundles and do lazy loading","archived":false,"fork":false,"pushed_at":"2022-12-06T21:05:10.000Z","size":3998,"stargazers_count":23,"open_issues_count":15,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-12T21:12:32.523Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://miguelmadero.com/ember-cli-bundle-loader-consumer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MiguelMadero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-29T00:14:03.000Z","updated_at":"2022-06-01T00:33:53.000Z","dependencies_parsed_at":"2023-01-23T15:16:26.918Z","dependency_job_id":null,"html_url":"https://github.com/MiguelMadero/ember-cli-bundle-loader","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelMadero%2Fember-cli-bundle-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelMadero%2Fember-cli-bundle-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelMadero%2Fember-cli-bundle-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MiguelMadero%2Fember-cli-bundle-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MiguelMadero","download_url":"https://codeload.github.com/MiguelMadero/ember-cli-bundle-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225254329,"owners_count":17445163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:00.839Z","updated_at":"2024-11-18T21:31:10.356Z","avatar_url":"https://github.com/MiguelMadero.png","language":"JavaScript","readme":"\n\n# Ember-cli-bundle-loader [![Build Status](https://travis-ci.org/MiguelMadero/ember-cli-bundle-loader.svg?branch=master)](https://travis-ci.org/MiguelMadero/ember-cli-bundle-loader) [![Download count all time](https://img.shields.io/npm/dt/ember-cli-bundle-loader.svg)](https://www.npmjs.com/package/ember-cli-bundle-loader) [![Ember Observer Score](http://emberobserver.com/badges/ember-cli-bundle-loader.svg)](http://emberobserver.com/addons/ember-cli-bundle-loader)\n\n[![Code Climate](https://codeclimate.com/github/MiguelMadero/ember-cli-bundle-loader/badges/gpa.svg)](https://codeclimate.com/github/MiguelMadero/ember-cli-bundle-loader)\n[![Test Coverage](https://codeclimate.com/github/MiguelMadero/ember-cli-bundle-loader/badges/coverage.svg)](https://codeclimate.com/github/MiguelMadero/ember-cli-bundle-loader/coverage)\n[![Dependency Status](https://www.versioneye.com/user/projects/57df010fbf3e4c0034e22b35/badge.svg?style=flat-square)](https://www.versioneye.com/user/projects/57df010fbf3e4c0034e22b35)\n[![Dependency Status](https://www.versioneye.com/user/projects/57df010b037c2000475cd3e9/badge.svg?style=flat-square)](https://www.versioneye.com/user/projects/57df010b037c2000475cd3e9)\n[![npm version](https://badge.fury.io/js/ember-cli-bundle-loader.svg)](https://badge.fury.io/js/ember-cli-bundle-loader)\n\nThis project lets you build your app in different packages and load those packages lazily. The main goal of this is faster boot times for large applications, but it can also help with independentl build and deployments for different sub-products or sections of your app. \n\nYou can see a demo live on http://miguelmadero.com/ember-cli-bundle-loader/\n\n## How it works\n\nWe treat each package as an EmberApp, each of them will have its own JS and CSS output. For each package, it also changes certain things to avoid unnecessary processing of addons to get faster builds for packages.\n\n## Installation\n\n```\nember install MiguelMadero/ember-cli-bundle-loader # follow the prompts and diff\nember generate package package-name\n```\n\nOn a new app, simply override all the files when prompted during the `ember install` step. For existing apps, you can do a diff of each file. Most of the changes are simple and you can see an [example diff](https://github.com/MiguelMadero/ember-cli-bundle-loader-consumer/commit/d5791080ef915d84b7095e261701134267a73fd8). \n\nNow you can add routes to the main app (`app/router.js`) and to each package `(package-name/router.js`). Additionally, you will need to edit `config/bundles.js` with information about your package and the routes it handles. \n\n## File Structure\n\n### Current Ember Apps\n\nThe typical output of an Ember App looks something like:\n\n- dist/\n  - index.html\n  - assets/\n    app.js\n    app.css\n    vendor.js\n    vendor.css\n\n### Output of Packages with this addon\n\n- dist/\n  - index.html\n  - assets/\n    boot.js\n    boot.css\n    package1.js\n    package1.css\n    package2.js\n    package2.css\n    vedor.js*\n    vendor.csss\n\n\\* We could also break vendor into smaller assets and define them as a dependency. More on this later. \n\n### Source File Structure\n\n- app/\n  - index.html, *router.js*, resolver.js, app.js\n  - routes/, controllers/, helpers/, models/, styles/, templates/, etc/\n  - pods/ \n- config\n  - environment.js \n  - bundles.js (new)\n  - package-names.js (new)\n- packages (new)\n  - package-name/\n    - index.html, *router.js*, resolver.js, app.js\n    - routes/, controllers/, helpers/, models/, styles/, templates/, etc/\n    - pods/ \n  - another-package/\n      - index.html, router.js, resolver.js, app.js\n      - routes/, controllers/, helpers/, models/, styles/, templates/, etc/\n      - pods/ \n\nThe app folder is identical to a normal EmberApp, it is, in fact just a normal EmberApp. This app is responsible for the booting everything. Only put here anything that is strictly required to get to the first page(s) or whatever is more important for a first time load. For example, your login page, the navbar, the default landing page. Each app will have different requirements, but the guidance is to keep it small. Initializers also have to be here since packages won't be available when we create the app. We could, in theory, lazy load initializers, but that doesn't make a lot of sense, so I have not tested it.\n\nThere is a new top-level folder called `packages`, each package is like a normal EmberApp, with the exception that we don't need an index.html and we can't initializers. In the future this packages will become engines.\n\nTests. Currently, all tests live under the traditional folders. It is suggested to create sub-folders like `tests/unit/package-name/` to provide some separation. In the future, tests for a package will move under each package folder. (Future: `packages/my-package/tests` and `packages/my-package/app`). In-repo-addons and engine have the same problem today see [issues#4461](https://github.com/ember-cli/ember-cli/issues/4461).\n\n### JS\n\nAll the JS modules are namespaced with the package name. For example, the route defined in `package1/routes/package1.js` is defined as `define('package1/routes/package1'` in the output code. This is because that's simply the name of the app when building. That gives us the advantage of being explicit about the way we consume and refer in code. However, this also requires a new resolver that can lookup for routes under the packages see `app/resolvers/packages.js` for more info. Please be aware of this namespace, it's especially important for `utils` or any other code that you import, for a hypothetical date-formatter utility under `package1/utils/date-formatter` will be imported as `import dateFormatter from 'package1/utils/date-formatter'`. Please be aware of this for tests.\n\n#### Vendor assets\n\n[ ] TODO: test\n We can define vendor assets as dependencies. Today, ember-cli supports specifying an `outputFile` when calling `app.import`. This works with static libraries and we'll add support to do it for addons. Once you have different vendor assets, you can simply define them as dependencies in `config/bundles.js`. For example:\n\n```\n// ember-cli-build.js\nvar EmberAppWithPackages = require('./lib/broccoli/ember-app-with-packages');\nmodule.exports = function (defaults) {\n var app = new EmberAppWithPackages(defaults);\n app.import('bower_components/moment/moment.js', {outputFile: 'vendor2.js'});\n app.import('bower_components/lodash/lodash.js', {outputFile: 'vendor3.js'});\n return app.toTree();\n};\n\n// /config/bundles.js\nmodule.exports = [{\n    name: 'package1',\n    routeNames: ['^package1']\n  }, {\n    name: 'package2',\n    routeNames: ['^package2']\n    dependsOn: ['package1']\n}];\n```\n\nBased on the example above, when we go to `/package2`, we will load `vendor2.js`, `package1.js` and `vendor3.js`, only if they have not been loaded before. While the lbiraries are loaded in parallel, they will be executed in the order they were definied. \n\n#### Vendor assets from components\n\nSometimes we can't depend on routes to load the packages, but instead, \ncomponents are the ones that depend on a vendor lib. In this case\nthey're responsible of initiating the load and providing a \"loading\" state. \nThe following is an example using handsontable as a reference, assumine\nwe have a handsontable wrapper:\n\n```\n// components/handson-table.js\nexport default Ember.Component.extend({\n  lazyLoader: Ember.inject.service(),\n  init () {\n    this._super.apply(this, arguments);\n    this.get('lazyLoader').loadBundle('handsontable').then(() =\u003e  \n      this.initHandsOnTableInstance());\n  },\n  didInsertElement () {\n    this.get('isInDom', true);\n    this.initHandsOnTableInstance();\n  },\n  initHandsOnTableInstance () {\n    if (this.get('lazyLoader').isBundleLoaded('handsontable') \u0026\u0026 this.get('isInDom')) {\n      // actual initialization of the wrapper\n      // Often components need to wait for didInsert, in this case we need both, didInsert/\n      // and loading the assets.\n    }\n  }\n})\n```\n\nOn the HBS for the wrapper: \n\n```\n{{#if lazyLoader.loadedBundles.handsontable}}\n  {{!-- markup for handsontable --}}\n{{else}}\n  \u003cdiv class=\"loading\"\u003eLoading\u003cdiv\u003e\n{{/if}}\n```\n\nIn config/bundles.js\n\n```\nmodule.exports = [\n  {\n    // Other bundles here...\n  // Vendor bundles\n  }, {\n    name: 'handsontable',\n    urls: ['/assets/handsontable.js', '/assets/handsontable.css']\n  }\n];\n\n```\n\nIn ember-cli-build.js\n\n```\napp.import('/bower_components/handsontable/handsontable.full.min.js', {outputFile: 'handsontable.js')\napp.import('/bower_components/handsontable/handsontable.full.min.css', {outputFile: 'handsontable.css')\n```\n\n#### Potential issues\n\nThe config/environment lives under `[modulePrefix]/config/environment`, which means it has the same path for every package. This is fine in most cases except if you're planning to share your packages across applications.\n\n### CSS\n\nThis demo uses ember-cli-sass, but the same technique would work with vanilla CSS (but please use a pre-processor) or Less. Is not tested with postCSS, but it isn't tested.\n\n## Deploy\n\nTo deploy the dummy app, with examples for lazy-loading, you can use `ember deploy development`, this will publish it to http://miguelmadero.com/ember-cli-bundle-loader/\n\n\n## Disclaimer\n\n*Note:* there is a ton of overlap with the work being done for * [ember engines](https://github.com/dgeb/ember-engines). While you might find this interesting, I strongly recommend you NOT to use these techniques and instead wait for ember-engines unless you're really desperate (like I am) to get lazy loading.\n\n## Running Tests\n\n* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\n## References\n\n* [Ember-engines](https://github.com/dgeb/ember-engines). The \"official\" path going forward\n* [Ember-cli-lazy-load](https://github.com/duizendnegen/ember-cli-lazy-load). Another approach to lazy loading. Bundle-loader and lazy-load might merge in the future and both eventually deprecated in favor of engines. \n","funding_links":[],"categories":["Packages"],"sub_categories":["Code Splitting"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMiguelMadero%2Fember-cli-bundle-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMiguelMadero%2Fember-cli-bundle-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMiguelMadero%2Fember-cli-bundle-loader/lists"}