fastpack

    0.9.1 • Public • Published

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

    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]

    Keywords

    none

    Install

    npm i fastpack

    DownloadsWeekly Downloads

    28

    Version

    0.9.1

    License

    MIT

    Unpacked Size

    33.5 MB

    Total Files

    11

    Last publish

    Collaborators

    • camsong