Rspack 0.3 の発表

2023年8月24日

破壊的な変更

バージョン0.3では、Rspackは、experiments.css = trueを設定した場合のデフォルトのCSS処理の動作をwebpackに合わせます。これには、多くの組み込みのCSS変換ロジックの削除が含まれており、いくつかの破壊的な変更が導入されています。アプリケーションが以前にこれらの変換ロジックに依存していた場合は、以下の移行手順に注意してください。

@rspack/postcss-loaderとbuiltins.postcssの削除

Rspackがpostcss-loaderを完全にサポートする前に、Rspackは@rspack/postcss-loaderと組み込みのbuiltins.postcssを実装して機能を実現していました。現在、Rspackはpostcss-loaderを完全にサポートしているため、@rspack/postcss-loaderとbuiltins.postcssを廃止することにしました。@rspack/postcss-loaderのユーザーはpostcss-loaderにシームレスに移行でき、以前にpx2rem変換機能にRspackのbuiltins.postcssを使用していたユーザーは、postcss-loaderとpostcss-plugin-px2remに移行できます。移行プロセスは次のとおりです。

• 以前

module.exports = {
  builtins: {
    postcss: {
      pxtorem: {
        rootValue: 50,
      },
    },
  },
};

• 以降

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-plugin-px2rem',
                    {
                      rootValue: 100,
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

組み込みのCSS Autoprefixer機能の削除

webpackのCSS処理により良く合わせるために、Rspackは0.3で組み込みのautoprefixer機能を削除します。postcss-loaderを使用してautoprefixerを実現できます。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['autoprefixer']],
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

examples/postcss-loader の完全な例を参照してください。

内部モジュールへのアクセス制限

Rspackの内部モジュールAPIの現在の不安定さのため、内部モジュールに直接アクセスすると、破壊的な変更が容易に発生する可能性があります。したがって、Rspackは内部モジュールに直接アクセスする機能を制限し、ルートモジュールからRspackのAPIへのアクセスのみをサポートします。

• 以前

import { Stats } from '@rspack/core/dist/stats'; // not supported since 0.3

• 以降

import { Stats } from '@rspack/core';

主な機能アップデート

Web Workersのサポート

RspackはWeb Workersをネイティブにサポートしているため、worker-loaderを使用せずにWeb Workersをすぐに使用できます。使用方法は次のとおりです。

new Worker(new URL('./worker.js', import.meta.url));
new Worker(new URL('./worker.js', import.meta.url), {
  name: 'my-worker',
});

Web Workersのサポートの詳細については、web workersを参照してください。

`builtin:swc-loader`のサポート

Rspackは多くのSWCコンパイル構成オプションを提供していますが、これらの構成はグローバルであり、異なるモジュールに異なるSWC変換ロジックを使用するという要件を満たすことができません。したがって、Rspackはbuiltin:swc-loaderをサポートして、よりきめ細かいSWC変換構成を提供します。JavaScript版のswc-loaderと比較して、builtin:swc-loaderはパフォーマンスが優れています。builtin:swc-loaderは次のように使用できます。

const path = require('path');
const config = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  pragma: 'React.createElement',
                  pragmaFrag: 'React.Fragment',
                  throwIfNamespace: true,
                  development: false,
                  useBuiltins: false,
                },
              },
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};
module.exports = config;

詳細については、examples/builtin-swc-loader を参照してください。現在、builtin:swc-loaderには、Wasmプラグインをサポートしないなど、まだ制限事項があります。Rspackは今後のバージョンでbuiltin:swc-loaderの機能をさらに反復し、より多くの機能をサポートします。

プロファイルサポートの改善

パフォーマンスの最適化は、ビジネスサポートにおける共通の要件です。ビジネスのパフォーマンス最適化のコストを削減するために、Rspack Profileのエクスペリエンスを改善しました。RSPACK_PROFILE環境変数を使用すると、パフォーマンス最適化のためのプロファイル関連ファイルを生成できます。

$ RSPACK_PROFILE=ALL rspack build

プロファイルの詳細については、パフォーマンスプロファイリングを参照してください。

より多くのAPIとの連携

splitChunks.chunksが正規表現をサポートします。
splitChunk.\{cacheGroup\}.typeをサポートします。
splitChunk.\{cacheGroup\}.idHintをサポートします。
ensureChunkConditionsPluginをサポートします。
rule.useが関数をサポートします。
configuration.profileをサポートします。

より多くのフックとプラグインのサポート

バージョン0.2と比較して、バージョン0.3ではより多くのプラグインAPIを実装し、より多くのプラグインの互換性を改善しました。同時に、webpackのプラグインAPIサポートの進捗状況を洗練し、プラグインAPIのサポート進捗状況を透明化しました。プラグインAPIの実装進捗状況はここで追跡できます：plugin-api-progress。

webpackアーキテクチャとの連携

バージョン0.3では、webpackアーキテクチャとの連携をさらに最適化し、元のASTベースのコード生成アーキテクチャから文字列変換ベースのアーキテクチャに移行しました。この連携作業により、コード生成段階でRspackがwebpackのより多くのフックAPIと連携し、より多くのコミュニティプラグインと互換性を持つことができるようになります。

Rspackエコシステム

バージョン0.2から、Rspackはvue-loaderのサポートを提供しています。ただし、vue-loaderに基づいて完全なVue.js CLIソリューションを作成することは複雑な作業になる可能性があります。Rspackを使用してVue.jsアプリケーションの開発を簡素化するために、すぐに使えるソリューションであるRsbuildを提供します。このソリューションは、開発者がRspackを使用してVue.jsアプリケーションを簡単に開発するのに役立ちます。

このページの内容

Rspack 0.3 の発表#

破壊的な変更#

@rspack/postcss-loaderとbuiltins.postcssの削除#

組み込みのCSS Autoprefixer機能の削除#

内部モジュールへのアクセス制限#

主な機能アップデート#

Web Workersのサポート#

builtin:swc-loaderのサポート#

プロファイルサポートの改善#

より多くのフックとプラグインのサポート#

webpackアーキテクチャとの連携#

Rspackエコシステム#