BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Rollup 1.0、ライブラリバンドリングにコード分割をもたらす

Rollup 1.0、ライブラリバンドリングにコード分割をもたらす

ブックマーク

原文(投稿日:2019/03/13)へのリンク

Rollupが最初のメジャーイテレーションをリリースした。Rollup 1.0を使うことで、開発者はライブラリバンドルをコード分割することができる。これにより、ライブラリは最適化されたバンドルを用いて、複数のimportターゲットをエクスポートできる。

Rollup 1.0のリリース記事では、エクスポートされるライブラリ関数に対応して4つのエントリーポイントを持つfancy-caseライブラリを例としてあげている。

fancy-case library entry points

Rollup 1.0は8つのモジュールを5つのチャンク、すなわち各エントリーモジュールと他のチャンクによってインポートされるチャンク、に削減する。コード分割されたチャンクは、Rollupのtree-shakingの恩恵を受けながらも、それ自体はブラウザのビルトインモジュールローダーを用いる標準のESモジュールであり、追加のランタイムオーバーヘッドはない。

設定は以下の内容を含むrollup.config.jsファイルで構成される。

export default
    {
        input: {
            index: 'src/main.js',
            upper: 'src/upper.js',
            lower: 'src/lower.js',
            upperFirst: 'src/upperFirst.js'
        },
        output: [
            {
                dir: 'esm',
                format: 'esm'
            },
            {
                dir: 'cjs',
                format: 'cjs'
            }
        ]
    }

inputプロパティでエントリーポイントを指定する。outputプロパティで出力ディレクトリを指定する。それから、次のようにpackage.jsonファイルでディレクトリを参照する。

{
  "name": "fancy-case",
  "version": "1.0.0",
  "main": "cjs/index.js",
  "module": "esm/index.js",
  "scripts": {
    "prepare": "rollup --config"
  },
  "files": [
    "cjs/*",
    "esm/*"
  ],
  "devDependencies": {
    "rollup": "^1.0.0"
  }
}

コード分割によって、コードベースをオンデマンドでロード可能な小さなチャンクにスライスすることができる。この技術をWebアプリケーションに適用すると、フルバンドルをロード・パース・解釈するのを待つのと比べて、ユーザーは素早くインタラクティブなサイトにアクセスすることができる。この技術をライブラリに適用すると、多数の独立したユーティリティ関数を持つライブラリで、ユーザーは個別のファイルからライブラリの独立したパーツをインポートすることができる。例えば、import merge from ‘lodash-es/merge’とすることで、merge関数をインポートすることができる。また次のようにすることで、ユーザーは引き続きlodashのフルバンドルから任意の関数をインポートすることができる。

import { partition, memoize } from lodash-es;

Rollupの主要コントリビューターであるLukas Taegert氏は、「もちろん、RollupはWebアプリのバンドルにも使えます(動的インポートによるコード分割)」と述べている。Rollupのドキュメントにはさらなる例がある。

Rollupは2016年に先駆けてアプリケーションバンドル最適化にtree-shakingを使用した。Rollupの作者であるRich Harris氏は、Rollupのゴールは「人間が書いたように見える最高効率のバンドル」を作成することであり、「そのため、ライブラリの作成に特に適しています」と述べている。コード分割はRollup 0.55で導入された。機能はその後洗練され、複数のバグ修正と改善を経て、Rollup 1.0で特にフィーチャーされている。

Webpackは複雑なSPA(シングルページアプリケーション)を構築することを目的に、2012年に始まった。その目的のため、Webpackはコード分割と静的アセットバンドリングを導入した。Webpackは2回目のメジャーイテレーションで、tree-shaking(より正確にはデッドコードの削除)を初めて導入した。

RollupはMITオープンソースライセンスのもと利用できる。GitHubパッケージ経由のコントリビューションが歓迎されており、Rollupのコントリビューションガイドライン行動規範に従う必要がある。

この記事に星をつける

おすすめ度
スタイル

BT