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 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
<!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 --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!
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]
FAQs
Pack JS code fast & easy.
The npm package fastpack receives a total of 8 weekly downloads. As such, fastpack popularity was classified as not popular.
We found that fastpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.