Fastpack
Pack JS code into a single bundle fast & easy.
Why?
Because JavaScript builds should be faster!
Here is an example benchmark of bundling ~1600 modules together.
Fastpack | Parcel | Webpack | |
---|---|---|---|
initial build | 0.730s | 9.740s | 3.625s |
persistent cache | 0.171s | 1.218s | N/A |
watch mode | 0.084s | 0.503s | 0.473s |
Getting Started
Let's try building the simple React application!
$ mkdir react-app $ cd react-app $ yarn init -y $ yarn add react react-dom $ yarn add --dev fastpack $ yarn add --dev babel-loader babel-preset-react-app style-loader css-loader url-loader
src/index.js
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
src/index.css
body { margin: 0; padding: 0; font-family: sans-serif;}
src/App.js
import React, { Component } from 'react';import logo from './logo.svg';import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); }} export default App;
src/App.css
.App { text-align: center;} .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px;} .App-header { background-color: #222; height: 150px; padding: 20px; color: white;} .App-title { font-size: 1.5em;} .App-intro { font-size: large;} @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
index.html
React App
Also, add the src/logo.svg
of your choice. Now let's add some config:
.babelrc
{ "presets": ["react-app"]}
And the fastpack configuration as well:
fastpack.json
{ "entryPoints": ["src/index.js"], "preprocess": [ { "re": "^src.+\\.js$", "process": "babel-loader" }, { "re": "\\.svg$", "process": "url-loader" }, { "re": "\\.css$", "process": "style-loader!css-loader" } ]}
The above configuration can be alternatively specified using command-line arguments, for more details run:
$ node_modules/.bin/fpack --help
We are good to go! Now run:
$ node_modules/.bin/fpack build --dev Cache: empty Done in 0.817s. Bundle: 942Kb. Modules: 30. $ open index.html
Voila! Now try running it again and see the power of the persistent cache!
$ node_modules/.bin/fpack build --dev Cache: used Done in 0.032s. Bundle: 942Kb. Modules: 30.
For more configuration options and usage scenarios see Documentation.
Have a question or want to contribute? Join us on Discord!
Contributors
This project exists thanks to all the people who contribute.
Special thanks to @camsong for providing the fastpack name on npmjs.com!
Backers
Thank you to all our backers! 🙏 [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]