Skip to content
Prototyping a solution to replace an inefficient Webpack bundling process.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
.gitignore
LICENSE
README.md
bundler.js
package-lock.json
package.json
tsconfig.json

README.md

BYOB: Bring Your Own Bundler

The purpose of this prototype is to experiment with the idea of building a custom bundler. Webpack works well for SPAs but fails to code split the bundles into small reusable chunks.

Possible Solutions

  1. Use a custom rollup script as the bundler (checkout my web components prototype for an example)
  2. Manually bundle files using nodejs & the FS api file system api

Project Outline

  1. Parse JavaScript files for imports
  2. Remove duplicate imports
  3. Split bundles into local scripts and node modules
  4. Recursively parse node module dependencies
  5. Bundle node modules
  6. Bundle local scripts
  7. Create runtime application for loading required scripts

Goals

  • Bundle local scripts
  • Bundle node modules
  • Runtime application
    • Imports dependencies
    • Limits file request when the same import is required for multiple files
    • Delays script instantiation until all dependencies are loaded

Script Lifecycle

  1. Runtime application parsed & loaded
  2. Script 1 and Script 2 parsed & loaded
    • Script 1 Requires: Env & UUID
    • Script 2 Requires: Env
  3. Script 1 requests Env and UUID scripts from the runtime application
  4. Runtime application beings loading Env and UUID
  5. Script 2 requests Env from the runtime application
  6. Runtime application ignores request since Env is already requested and loading
  7. Server responds with Env
  8. Env is parsed and loaded
  9. Custom loaded event is fired informing scripts of the Env load status
  10. Script 1 hears the Env load event and checks if all dependencies have been met
  11. Check fails Script 1 continues to wait
  12. Script 2 hears the Env load event and checks if all dependencies have been met
  13. Check passes, Script 2 is mounted, event listener removed
  14. Server responds with UUID
  15. UUID is parsed and loaded
  16. Custom loaded event is fired informing scripts of the UUID load status
  17. Scripts 1 hears the UUID load event and checks if all dependencies have been met
  18. Check passes, Script 1 is mounted, event listener removed

Postmortem

TODO: Write postmortem documentation after prototype is finished

You can’t perform that action at this time.