FuseBox 3.0 — faster than ever

Ivan Orlov
Jan 5, 2018 · 2 min read
Image for post
Image for post

FuseBox 3.0 has been finally released, it’s 20% faster and lighter. Did you know that it takes 50–100ms to re-bundle a heavy project?

Let’s break it down and see what are the new features.

Code splitting without configuration

It’s finally here. No magical comments, no configs. FuseBox builds a dependency tree automatically and generates according bundles. You can split a package for example just by defining a dynamic import.

await import("moment")

Isn’t that great? Moreover, FuseBox does what none of the bundlers can — you can publish a typescript source and once the latter one installed, FuseBox will make a split automatically (if defined). Say, you are relying on a library but you know that it’s heavy, so you could publish a source that contains dynamic imports. It will be split without user even knowing it. Check the example here

And most certainly, you are able to create split bundles that contain project files

import("./components/AboutComponent")

FuseBox will traverse the tree and detect which files and packages belong only to that split package. Shared packages will not be bundled and stay within the master bundle.

Updated task runner

Our task runner “Sparky” has been greatly simplified, we’ve added new helpers like npmPublish and some others, to help you deal with your everyday tasks.

It looks much nicer, and finally each task can receive a context

Context function accepts classes, functions and objects and passed into each task.

Typescript packages

Now you can publish a typescript package to npm!

{
"ts:main" : "index.ts",
"main" : "index.js"
}

Just modify package.json and off you go. If you are planning to use with FuseBox you can set main option to point to a typescript file. And again — no configuration required.

The actual benefits are:

  • You are in control of script targets.
  • Tree shaking will work 100%
  • No brainer with typings (you don’t need to generate ones)
  • You can use async await syntax to split packages within an NPM library! (unique FuseBox feature)

Speed and stability improvements

FuseBox is now 20–30% faster thanks to the latest NodeJS. We’ve refactored the code to use async await instead of Promises.

For those who aren’t ready to switch to the latest NodeJS, there is a bundle with es6 target that you can use

import { FuseBox } from “fuse-box/es6

Brand new website

And finally we have a fresh new look

Image for post
Image for post

If you like the project, don’t forget to star the github repository, and follow us on twitter

fusebox

A powerful toobox for javascript developers http://fuse-box.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store