Modesto  Corwin

Modesto Corwin

1591583220

Webpack, Rollup and Parcel Compared

Let’s build a React app using Webpack, Rollup and Parcel to compare these three bundlers.

Code: https://github.com/jherr/bundler-comparison

#webpack #parcel

What is GEEK

Buddha Community

Webpack, Rollup and Parcel Compared
Meggie  Flatley

Meggie Flatley

1602128120

Benchmarking Bundlers 2020: Rollup vs. Parcel vs. Webpack

Bundlers serve as a cornerstone technology for all modern web apps. We’ve benchmarked Rollup, Parcel.js, and webpack across multiple criteria.

Bundlers serve as a cornerstone technology for all modern web apps — or, more specifically, all JavaScript apps. As the frontend world progressed with more client-side-rendered apps, ideas began to emerge about how to efficiently bundle our tons of JS.

Cognitively, as the number of options increase, selection becomes difficult. Here, we will analyze the tech and non-tech competencies of the top bundlers available today to make your decision easy and well informed.

We’ll be covering:

For comparing technical competencies, we have picked up React Facebook Pixel as a library and a very basic React app as a sample to benchmark each of these bundlers.

This comparison is not to establish a single winner from amongst these great tools; rather, it is to help you more easily make your decision. All of these bundlers are definitely great tools managed by great people, and they are all super awesome in one way or another. To all the maintainers, contributors, sponsors, and backers, cheers

Configurations

Configuring a bundle has been one of the most cursed yet most sophisticated areas in the frontend world. For small-scale applications, one might feel this should be very straightforward. Still, as the application’s size grows, we need more sophisticated configurations to keep our apps efficient and performant.

We have witnessed many debates among developers about how tedious it is to configure a modern-day tech stack for a small app. These debates and the common patterns subsequently adopted by a majority of the community have led many bundlers to offer zero-config solutions.

Though it’s claimed by almost all of these bundlers, being zero-config is not possible for any of them. It is more about being quickly configurable and keeping the configuration guides as comfortable as possible.

All of these bundlers have their reds and blues in this area. Here, we are sharing configs for generating distribution packages for React Facebook Pixel. It will give you a glimpse of how it looks like for each of these bundlers.

webpack

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'fb-pixel-webpack.js',
    libraryTarget: 'umd',
    library: 'ReactPixel',
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          warnings: false,
          compress: {
            comparisons: false,
          },
          parse: {},
          mangle: true,
          output: {
            comments: false,
            ascii_only: true,
          },
        },
        parallel: true,
        cache: true,
        sourceMap: true,
      }),
    ],
    nodeEnv: 'production',
    sideEffects: true,
  },
};

Rollup

import babel from '@rollup/plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import filesize from 'rollup-plugin-filesize';
import progress from 'rollup-plugin-progress';
import visualizer from 'rollup-plugin-visualizer';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/fb-pixel.js',
      format: 'cjs',
      name: 'ReactPixel',
      exports: 'named',
    },
  ],
  plugins: [
    terser(),
    babel({ babelHelpers: 'bundled' }),
    nodeResolve(),
    // All of following are just for beautification, not required for bundling purpose
    progress(),
    visualizer(),
    filesize(),
  ],
};

Parcel.js

We didn’t need any configs for Parcel, as the default configs were enough to handle our library. Here is the command we used:

bash
    "bundle:parcel": "parcel build src/index.js --experimental-scope-hoisting --out-file fb-pixel-parcel.js",

Here is my conclusion for this:

  • webpack still requires us to use ES5 syntax, which makes it a little problematic
  • Rollup has simpler syntax and looks ideal for managing libraries
  • Parcel v2 is coming up with configuration file support with awesome default configs to extend for sophisticated apps

#webpack #parcel #rollup #javascript #web-development

Modesto  Corwin

Modesto Corwin

1591583220

Webpack, Rollup and Parcel Compared

Let’s build a React app using Webpack, Rollup and Parcel to compare these three bundlers.

Code: https://github.com/jherr/bundler-comparison

#webpack #parcel

Go Programming

Go Programming

1603417114

Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

What is a Module Bundler? And why do I need one? Learn how tools like Webpack, Rollup, Parcel, and Snowpack can package your code as a production-ready web application.

Webpack https://webpack.js.org/
Snowpack https://www.snowpack.dev/

#webpack #parcel #programming #developer

Carmen  Grimes

Carmen Grimes

1611715282

An Introduction to the Rollup.js JavaScript Bundler

Snowpack, Webpack and Parcel bundle your JavaScript but are hard to custom configure. Rollup.js is faster and more configurable. Learn how to set it up!

Rollup.js is a next-generation JavaScript module bundler from Rich Harris, the author of Svelte. It compiles multiple source files into a single bundle.

The benefits include:

  • development is easier to manage when using smaller, self-contained source files
  • the source can be linted, prettified, and syntax-checked during bundling
  • tree-shaking removes unused functions
  • transpiling to ES5 for backward compatibility is possible
  • multiple output files can be generated — for example, your library could be provided in ES5, ES6 modules, and Node.js-compatible CommonJS
  • production bundles can be minified and have logging removed

Other bundler options, such as webpack, Snowpack, and Parcel, attempt to magically handle everything: HTML templating, image optimization, CSS processing, JavaScript bundling, and more. This works well when you’re happy with the default settings, but custom configurations can be difficult and processing is slower.

Rollup.js primarily concentrates on JavaScript (although there are plugins for HTML templates and CSS). It has a daunting number of options, but it’s easy to get started and bundling is fast. This tutorial explains how to use typical configurations within your own projects.

#javascript #rollup #snowpack #webpack #parcel

Introduce Unplugin: Unified Plugin System for Vite, Rollup and Webpack

unplugin

Experimental

Unified plugin system for build tools.

Currently supports:

Hooks

unplugin extends the excellent Rollup plugin API as the unified plugin interface and provides a compatible layer base on the build tools used with.

Supported

HookRollupViteWebpack
transformInclude
transform
enforce❌*
resolveId
load
  • *: Rollup does not support using enforce to control the order of plugins. Users will need to maintain the order manually.

Usage

import { createUnplugin } from 'unplugin'

export const unplugin = createUnplugin((options: UserOptions) => {
  return {
    name: 'my-first-unplugin',
    // webpack's id filter is outside of loader logic,
    // an additional hook is needed for better perf on webpack
    transformInclude (id) {
      return id.endsWith('.vue')
    },
    // just like rollup transform
    transform (code) {
      return code.replace(/<template>/, `<template><div>Injected</div>`)
    },
    // more hooks coming
  }
})

export const vitePlugin = unplugin.vite
export const rollupPlugin = unplugin.rollup
export const webpackPlugin = unplugin.webpack

Plugin Installation

Vite

// vite.config.ts
import MyUnplugin from './my-unplugin'

export default {
  plugins: [
    MyUnplugin.vite({ /* options */ })
  ]
}

Rollup

// rollup.config.js
import MyUnplugin from './my-unplugin'

export default {
  plugins: [
    MyUnplugin.rollup({ /* options */ })
  ]
}

Webpack

// webpack.config.js
module.exports = {
  plugins: [
    require('./my-unplugin').webpack({ /* options */ })
  ]
}

Framework-specific Logic

While unplugin provides compatible layers for some hooks, the functionality of it is limited to the common subset of the build's plugins capability. For more advanced framework-specific usages, unplugin provides an escape hatch for that.

export const unplugin = createUnplugin((options: UserOptions, meta) => {

  console.log(meta.framework) // 'vite' | 'rollup' | 'webpack'

  return {
    // common unplugin hooks
    name: 'my-first-unplugin',
    transformInclude (id) { /* ... */ },
    transform (code) { /* ... */  },
    
    // framework specific hooks
    vite: {
      // Vite config
      configureServer(server) {
        // configure Vite server
      }
    },
    rollup: {
      // Rollup config
    },
    webpack(compiler) {
      // configure Webpack compiler
    }
  }
})

Starter Templates

Examples

Download Details:
Author: unjs
Download Link: Download The Source Code
Official Website: https://github.com/unjs/unplugin
License: MIT
 

#vue #vite #rollup #webpack #webdev