All Projects → fastpack → Fastpack

fastpack / Fastpack

Licence: mit
Pack JS code fast & easy

Programming Languages

javascript
184084 projects - #8 most used programming language
ocaml
1615 projects
Standard ML
205 projects
perl
6916 projects
C++
36643 projects - #6 most used programming language
shell
77523 projects

Labels

Projects that are alternatives of or similar to Fastpack

Metro With Symlinks
Metro with Symlinks
Stars: ✭ 49 (-97.85%)
Mutual labels:  bundler
Cloudflare Workers Webpack Boilerplate
A superbly simple, minimal-config template for building, bundling and deploying Cloudflare Workers with Webpack 🚀
Stars: ✭ 101 (-95.57%)
Mutual labels:  bundler
Webpackbar
Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5
Stars: ✭ 1,887 (-17.16%)
Mutual labels:  bundler
Jekyll Minibundle
A minimalistic asset bundling plugin for Jekyll
Stars: ✭ 65 (-97.15%)
Mutual labels:  bundler
Auxpack
A dashboard for monitoring Webpack build stats.
Stars: ✭ 86 (-96.22%)
Mutual labels:  bundler
Bundleup
A friendlier CLI for Bundler’s `update` and `outdated` commands.
Stars: ✭ 111 (-95.13%)
Mutual labels:  bundler
Scarab
A system to patch your content files.
Stars: ✭ 38 (-98.33%)
Mutual labels:  bundler
Carton
📦 Watcher, bundler, and test runner for your SwiftWasm apps
Stars: ✭ 171 (-92.49%)
Mutual labels:  bundler
Shortstack
🥞 minimal Rollup + PostCSS modern syntax starter template
Stars: ✭ 94 (-95.87%)
Mutual labels:  bundler
Enb
Tool for building web projects, BEM bundler.
Stars: ✭ 136 (-94.03%)
Mutual labels:  bundler
Neuron.js
A Full Feature CommonJS Module Manager, Dependency Graph Handler and Loader for Browsers
Stars: ✭ 66 (-97.1%)
Mutual labels:  bundler
Denopack
The bundling and minification toolset, made for Deno
Stars: ✭ 81 (-96.44%)
Mutual labels:  bundler
Instapack
All-in-one TypeScript and Sass compiler for web applications! 📦 🚀
Stars: ✭ 131 (-94.25%)
Mutual labels:  bundler
Aspnetbundling
An assortment of bundling utility classes like custom transformers and fixes for the ASP.NET Web Optimization bundling framework.
Stars: ✭ 61 (-97.32%)
Mutual labels:  bundler
Velcro
A set of tools and libraries for stitching together modules and code in highly dynamic browser environments
Stars: ✭ 159 (-93.02%)
Mutual labels:  bundler
Phaser Node Kit
Rapid Game Development with PhaserJS and Node for Modern Browsers
Stars: ✭ 39 (-98.29%)
Mutual labels:  bundler
Nexe
🎉 create a single executable out of your node.js apps
Stars: ✭ 10,565 (+363.78%)
Mutual labels:  bundler
Bundler
🎁 Android Intent & Bundle extensions that insert and retrieve values elegantly.
Stars: ✭ 195 (-91.44%)
Mutual labels:  bundler
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (-10.05%)
Mutual labels:  bundler
Wean
🍀 小程序构建工具 ♂ 重新实现小程序标准 ♀ 小程序 => web
Stars: ✭ 125 (-94.51%)
Mutual labels:  bundler

Fastpack

Build Status Backers on Open Collective Sponsors on Open Collective

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 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-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!

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]

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].