Pack JS code into a single bundle fast & easy.
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 |
Let's try building a 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-loadersrc/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
<!DOCTYPE html>
<html>
<head><title>React App</title></head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./bundle/index.js"></script>
</body>
</html>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 --helpWe are good to go! Now run:
$ node_modules/.bin/fpack build --dev
Cache: empty
Done in 0.817s. Bundle: 942Kb. Modules: 30.
$ open index.htmlVoila! 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!
This project exists thanks to all the people who contribute.
Special thanks to @camsong for providing the fastpack name on npmjs.com!
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent