Which is Better Rollup Plugins for Asset Management?
rollup-plugin-copy vs rollup-plugin-smart-asset
1 Year
rollup-plugin-copyrollup-plugin-smart-assetSimilar Packages:
What's Rollup Plugins for Asset Management?

Rollup plugins are essential for managing assets in modern JavaScript applications, especially when using Rollup as a module bundler. These plugins enhance the build process by providing functionalities such as copying files, optimizing assets, and managing dependencies. The two plugins in question serve different purposes: 'rollup-plugin-copy' focuses on copying files from one location to another during the build process, while 'rollup-plugin-smart-asset' is designed to optimize and manage asset files intelligently, allowing for better performance and organization in the final output.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
rollup-plugin-copy466,17226916.6 kB29a year agoMIT
rollup-plugin-smart-asset18,38533-143 years agoMIT
Feature Comparison: rollup-plugin-copy vs rollup-plugin-smart-asset

Functionality

  • rollup-plugin-copy: This plugin provides a simple way to copy files and directories from a source to a destination during the Rollup build process. It allows for configuration options such as specifying which files to copy, renaming files, and even using glob patterns to match multiple files, making it versatile for various project structures.
  • rollup-plugin-smart-asset: This plugin intelligently manages asset files by optimizing them based on their usage in the project. It can handle image compression, SVG optimization, and other asset-related tasks, ensuring that the final bundle is as lightweight as possible while maintaining quality.

Use Cases

  • rollup-plugin-copy: Ideal for projects that need to include static assets without processing them, such as copying images or stylesheets directly into the output directory. It's particularly useful in scenarios where you want to maintain the original file structure and contents.
  • rollup-plugin-smart-asset: Best suited for projects that require asset optimization and management, especially when dealing with a large number of images or other media files. It is beneficial for applications that prioritize performance and loading speed.

Configuration Options

  • rollup-plugin-copy: Offers straightforward configuration options, allowing developers to specify source and destination paths, file patterns, and whether to overwrite existing files. This simplicity makes it easy to integrate into various build processes without much overhead.
  • rollup-plugin-smart-asset: Provides advanced configuration options that allow for detailed control over how assets are processed and optimized. This includes options for compression levels, output formats, and handling of different asset types, giving developers flexibility in managing their assets.

Performance Impact

  • rollup-plugin-copy: Since this plugin primarily focuses on copying files without processing them, its performance impact is minimal. It operates quickly, making it suitable for projects where build speed is a priority and asset processing is not required.
  • rollup-plugin-smart-asset: This plugin can significantly improve the performance of your application by optimizing asset sizes and formats, which can reduce loading times. However, the optimization process may add some overhead during the build, so it's essential to balance the benefits against build time.

Community and Support

  • rollup-plugin-copy: This plugin is widely used and has a strong community backing, ensuring that developers can find support, documentation, and examples easily. Its popularity means that it is regularly maintained and updated to keep up with Rollup's evolution.
  • rollup-plugin-smart-asset: While it may not be as widely adopted as 'rollup-plugin-copy', 'rollup-plugin-smart-asset' has a dedicated user base and sufficient documentation. However, developers may find fewer community resources compared to more established plugins.
How to Choose: rollup-plugin-copy vs rollup-plugin-smart-asset
  • rollup-plugin-copy: Choose 'rollup-plugin-copy' if your primary need is to copy static assets (like images, fonts, or other files) from your source directory to your output directory without any modifications. This is particularly useful for projects that require a straightforward file copying mechanism during the build process.
README for rollup-plugin-copy

rollup-plugin-copy

Build Status Codecov

Copy files and folders, with glob support.

Installation

# yarn
yarn add rollup-plugin-copy -D

# npm
npm install rollup-plugin-copy -D

Usage

// rollup.config.js
import copy from 'rollup-plugin-copy'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/app.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/index.html', dest: 'dist/public' },
        { src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' },
        { src: 'assets/images/**/*', dest: 'dist/public/images' }
      ]
    })
  ]
}

Configuration

There are some useful options:

targets

Type: Array | Default: []

Array of targets to copy. A target is an object with properties:

  • src (string Array): Path or glob of what to copy
  • dest (string Array): One or more destinations where to copy
  • rename (string Function): Change destination file or folder name
  • transform (Function): Modify file contents

Each object should have src and dest properties, rename and transform are optional. globby is used inside, check it for glob pattern examples.

File
copy({
  targets: [{ src: 'src/index.html', dest: 'dist/public' }]
})
Folder
copy({
  targets: [{ src: 'assets/images', dest: 'dist/public' }]
})
Glob
copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }]
})
Glob: multiple items
copy({
  targets: [{ src: ['src/index.html', 'src/styles.css', 'assets/images'], dest: 'dist/public' }]
})
Glob: negated patterns
copy({
  targets: [{ src: ['assets/images/**/*', '!**/*.gif'], dest: 'dist/public/images' }]
})
Multiple targets
copy({
  targets: [
    { src: 'src/index.html', dest: 'dist/public' },
    { src: 'assets/images/**/*', dest: 'dist/public/images' }
  ]
})
Multiple destinations
copy({
  targets: [{ src: 'src/index.html', dest: ['dist/public', 'build/public'] }]
})
Rename with a string
copy({
  targets: [{ src: 'src/app.html', dest: 'dist/public', rename: 'index.html' }]
})
Rename with a function
copy({
  targets: [{
    src: 'assets/docs/*',
    dest: 'dist/public/docs',
    rename: (name, extension, fullPath) => `${name}-v1.${extension}`
  }]
})
Transform file contents
copy({
  targets: [{
    src: 'src/index.html',
    dest: 'dist/public',
    transform: (contents, filename) => contents.toString().replace('__SCRIPT__', 'app.js')
  }]
})

verbose

Type: boolean | Default: false

Output copied items to console.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  verbose: true
})

hook

Type: string | Default: buildEnd

Rollup hook the plugin should use. By default, plugin runs when rollup has finished bundling, before bundle is written to disk.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  hook: 'writeBundle'
})

copyOnce

Type: boolean | Default: false

Copy items once. Useful in watch mode.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  copyOnce: true
})

copySync

Type: boolean | Default: false

Copy items synchronous.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  copySync: true
})

flatten

Type: boolean | Default: true

Remove the directory structure of copied files.

copy({
  targets: [{ src: 'assets/**/*', dest: 'dist/public' }],
  flatten: false
})

All other options are passed to packages, used inside:

Original Author

Cédric Meuter

License

MIT