WIP => feat(compiler): Migrate from Webpack to RSPack #14925

damassi · 2024-11-28T07:08:23Z

⚠️

The type of this PR is: Feat

Description

This migrates our compiler from Webpack to RSPack, a webpack-compatable bundler written in Rust for nearly instant cache-free compiles and hotreloading. This should speed up prod deploys considerably while also bringing instant DX.

rspack.mp4

Cold boot dev compile times:

Old:
57.31s.

New:
2.42s

Prod compile times:
Old:
57s

New:
8.60s

artsy-peril · 2024-11-28T07:08:36Z

rspack-manifest-plugin

Author: Dane Thurber

Description: A Rspack Plugin for generating Asset Manifests

Homepage: https://github.com/rspack-contrib/rspack-manifest-plugin


Created	over 1 year ago
Last Updated	22 days ago
License	MIT
Maintainers	2
Releases	7
Direct Dependencies	`@rspack/lite-tapable`

README

rspack-manifest-plugin

A Rspack plugin for generating an asset manifest.

❤️ Please consider Sponsoring shellscape (author of webpack-manifest-plugin)

Notice

This plugin is forked from shellscape/webpack-manifest-plugin.

The function of this plugin is basically the same as shellscape/webpack-manifest-plugin.

Change list:

Rename package to rspack-manifest-plugin
Import type from @rspack/core
Add @rspack/core to peer dependencies and remove webpack
Add RspackManifestPlugin export
Replace tapable dependency with @rspack/lite-tapable

Requirements

rspack-manifest-plugin is an evergreen 🌲 module.

This module requires an Active LTS Node version (v12.0.0+) and Webpack v5.0.0.

Contributing

This repository leverages pnpm for dependency management.

To begin, please install pnpm:

$ npm install pnpm -g

Install

Using npm:

npm install rspack-manifest-plugin --save-dev

Usage

Create a rspack.config.js file:

const { RspackManifestPlugin } = require('rspack-manifest-plugin');
const options = { ... };

module.exports = {
	// an example entry definition
	entry: [ 'app.js'	],
  ...
  plugins: [
    new RspackManifestPlugin(options)
  ]
};

And run Rspack.

With the default options, the example above will create a manifest.json file in the output directory for the build. The manifest file will contain a map of source filenames to the corresponding build output file. e.g.

{
  "dist/batman.js": "dist/batman.1234567890.js",
  "dist/joker.js": "dist/joker.0987654321.js"
}

Options

`assetHookStage`

Type: Number

Default: Infinity

If you need to consume the output of this plugin in another plugin, it can be useful to adjust the stage at which the manifest is generated. Pass a new stage to assetHookStage to change when the manifest is generated. See the docs on processAssets for more detail.

Note: any files added to the compilation after the stage specified will not be included in the manifest.

`basePath`

Type: String

Default: ''

Specifies a path prefix for all keys in the manifest. Useful for including your output path in the manifest.

`fileName`

Type: String

Default: manifest.json

Specifies the file name to use for the resulting manifest. By default the plugin will emit manifest.json to your output directory. Passing an absolute path to the fileName option will override both the file name and path.

`filter`

Type: Function

Default: undefined

Allows filtering the files which make up the manifest. The passed function should match the signature of (file: FileDescriptor) => Boolean. Return true to keep the file, false to remove the file.

`generate`

Type: Function

Default: undefined

A custom Function to create the manifest. The passed function should match the signature of (seed: Object, files: FileDescriptor[], entries: string[]) => Object and can return anything as long as it's serialisable by JSON.stringify.

`map`

Type: Function

Default: undefined

Allows modifying the files which make up the manifest. The passed function should match the signature of (file: FileDescriptor) => FileDescriptor where an object matching FileDescriptor is returned.

`publicPath`

Type: String

Default: <webpack-config>.output.publicPath

A path prefix that will be added to values of the manifest.

`removeKeyHash`

Type: RegExp | false

Default: /([a-f0-9]{32}\.?)/gi

If set to a valid RegExp, removes hashes from manifest keys. e.g.

{
  "index.c5a9bff71fdfed9b6046.html": "index.c5a9bff71fdfed9b6046.html"
}

{
  "index.html": "index.c5a9bff71fdfed9b6046.html"
}

The default value for this option is a regular expression targeting Webpack's default md5 hash. To target other hashing functions / algorithms, set this option to an appropriate RegExp. To disable replacing the hashes in key names, set this option to false.

`seed`

Type: Object

Default: {}

A cache of key/value pairs used to seed the manifest. This may include a set of custom key/value pairs to include in your manifest, or may be used to combine manifests across compilations in multi-compiler mode. To combine manifests, pass a shared seed object to each compiler's RspackManifestPlugin instance.

`serialize`

Type: Function(Object) => string

Default: undefined

A Function which can be leveraged to serialize the manifest in a different format than json. e.g. yaml.

`sort`

Type: Function

Default: undefined

Allows sorting the files which make up the manifest. The passed function should match the signature of (fileA: FileDescriptor, fileB: FileDescriptor) => Number. Return 0 to indicate no change, -1 to indicate the file should be moved to a lower index, and 1 to indicate the file shoud be moved to a higher index.

`useEntryKeys`

Type: Boolean

Default: false

If true, the keys specified in the entry property will be used as keys in the manifest. No file extension will be added (unless specified as part of an entry property key).

`useLegacyEmit`

Type: Boolean

Default: false

If true, the manifest will be written on the deprecated webpack emit hook to be compatible with not yet updated webpack plugins.

A lot of webpack plugins are not yet updated to match the new webpack 5 API. This is a problem when other plugins use the deprecated emit hook. The manifest will be written before these other plugins and thus files are missing on the manifest.

`writeToFileEmit`

Type: Boolean

Default: false

If true, will emit the manifest to the build directory and in memory for compatibility with webpack-dev-server.

Manifest File Descriptor

This plugin utilizes the following object structure to work with files. Many options for this plugin utilize the structure below.

{
  chunk?: Chunk;
  isAsset: boolean;
  isChunk: boolean;
  isInitial: boolean;
  isModuleAsset: boolean;
  name: string | null;
  path: string;
}

`chunk`

Type: Chunk

Only available if isChunk is true

`isInitial`

Type: Boolean

Is required to run you app. Cannot be true if isChunk is false.

`isModuleAsset`

Type: Boolean

Is required by a module. Cannot be true if isAsset is false.

Compiler Hooks

This plugin supports the following hooks via the getCompilerHooks export; afterEmit, beforeEmit. These hooks can be useful, e.g. changing manifest contents before emitting to disk.

`getCompilerHooks`

Returns: { afterEmit: SyncWaterfallHook, beforeEmit: SyncWaterfallHook }

Usage

const { getCompilerHooks } = require('rspack-manifest-plugin');

class BatmanPlugin {
  apply(compiler) {
    const { beforeEmit } = getCompilerHooks(compiler);

    beforeEmit.tap('BatmanPlugin', (manifest) => {
      return { ...manifest, name: 'hello' };
    });
  }
}

Notes

If using this plugin with webpack-clean and webpack-dev-server, please review this issue.

Attiribution

Special thanks to Dane Thurber, the original author of this plugin, without whom this plugin would not exist.

@swc/plugin-styled-components

Author: 강동윤

Description: SWC plugin for styled-components

Homepage: https://swc.rs


Created	over 2 years ago
Last Updated	22 days ago
License	Apache-2.0
Maintainers	2
Releases	149
Direct Dependencies	`@swc/counter`

README

`@swc/plugin-styled-components`

Setup

npm install --save-dev @swc/plugin-styled-components @swc/core

Then update your .swcrc file like below:

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  }
}

${CHANGELOG}

@swc/plugin-relay

Author: 강동윤

Description: SWC plugin for relay

Homepage: https://swc.rs


Created	over 2 years ago
Last Updated	14 days ago
License	Apache-2.0
Maintainers	2
Releases	148
Direct Dependencies	`@swc/counter`

README

`@swc/plugin-relay`

Setup

npm install --save-dev @swc/plugin-relay @swc/core

Example

The below shows how to configure @swc/plugin-relay and pass the options to Webpack:

Create an .swcrc.js file like the below:

// .swcrc.js

module.exports = {
  jsc: {
    experimental: {
      plugins: [
        [
          "@swc/plugin-relay",
          {
            rootDir: __dirname,
            artifactDirectory: "src/__generated__",
            language: "typescript",
            eagerEsModules: true,
          },
        ],
        // Or if you want to use multiple projects
        [
          "@swc/plugin-relay",
          {
            projects: [
              {
                rootDir: path.resolve(__dirname, '../project1'),
              },
              {
                rootDir: path.resolve(__dirname, '../project2'),
              }
            ],
            language: "typescript",
            eagerEsModules: true,
          },
        ],
      ],
    },
    parser: {
      syntax: "typescript",
      tsx: true,
    },
    transform: {
      react: {
        runtime: "automatic",
      },
    },
  },
};

And then update your swc-loader Webpack config:

const swcConfig = require("./.swcrc.js")

// ...

{
  include: path.resolve("./src"),
  test: /\.ts$/,
  use: [
    {
      loader: "swc-loader",
      options: swcConfig,
    },
  ],
}

Note: We're using a .swcrc.js file extension up above and importing the config directly because Relay needs access to __dirname, which can't be derived from the default JSON parsed from .swcrc.

Output import paths

By default, @swc/plugin-relay will transpile import paths based on the language option.
You can use outputFileExtension to change the file extension of the generated import paths.

plugins: [
    [
        "@swc/plugin-relay",
        {
            rootDir: __dirname,
            artifactDirectory: "src/__generated__",
            language: "typescript",
            eagerEsModules: true,
            outputFileExtension: "js",
        },
    ],
],

In this example typescript graphql files will output transpiled import path of javascript ending with .js.

${CHANGELOG}

@rspack/plugin-react-refresh

Author: Unknown

Description: React refresh plugin for rspack

Homepage: https://github.com/rspack-contrib/rspack-plugin-react-refresh#readme


Created	about 1 year ago
Last Updated	2 months ago
License	MIT
Maintainers	3
Releases	557
Direct Dependencies	`html-entities` and `error-stack-parser`

@rspack/core

Author: Unknown

Description: The fast Rust-based web bundler with webpack-compatible API

Homepage: https://rspack.dev


Created	over 2 years ago
Last Updated	2 days ago
License	MIT
Maintainers	3
Releases	1100
Direct Dependencies	`@module-federation/runtime-tools`, `@rspack/lite-tapable`, `caniuse-lite` and `@rspack/binding`

README

@rspack/core

The fast Rust-based web bundler with webpack-compatible API.

Documentation

See https://rspack.dev for details.

License

Rspack is MIT licensed.

@rspack/cli

Author: Unknown

Description: CLI for rspack

Homepage: https://rspack.dev


Created	about 2 years ago
Last Updated	2 days ago
License	MIT
Maintainers	3
Releases	1085
Direct Dependencies	`@discoveryjs/json-ext`, `@rspack/dev-server`, `colorette`, `exit-hook`, `interpret`, `rechoir`, `semver`, `webpack-bundle-analyzer` and `yargs`

README

@rspack/cli

Command-line interface for rspack.

Documentation

See https://rspack.dev for details.

License

Rspack is MIT licensed.

New dependencies added: @rspack/cli, @rspack/core, @rspack/plugin-react-refresh, @swc/plugin-relay, @swc/plugin-styled-components and rspack-manifest-plugin.

Generated by 🚫 dangerJS against 50f270b

relativeci · 2024-11-28T08:02:07Z

#1086 Bundle Size — 10.54MiB (+10.47%).

50f270b(current) vs ffe4f84 main#484(baseline)

Important

Bundle introduced 8 and removed 9 duplicate packages – View changed duplicate packages

Warning

Bundle introduced 13 new packages: web-vitals, @sentry-internal/browser-utils, stylis and 10 more – View changed packages

Bundle metrics

9 changes

4 improvements

	Current #1086	Baseline #484
Initial JS	`3.81MiB`(`-3.59%`)	`3.95MiB`
Initial CSS	`0B`	`0B`
Cache Invalidation	`100%`	`2.04%`
Chunks	`240`(`+67.83%`)	`143`
Assets	`244`(`+67.12%`)	`146`
Modules	`5447`(`-3.37%`)	`5637`
Duplicate Modules	`375`(`-17.58%`)	`455`
Duplicate Code	`4.85%`(`-17.52%`)	`5.88%`
Packages	`276`(`-5.15%`)	`291`
Duplicate Packages	`41`(`-2.38%`)	`42`

Bundle size by type

2 changes

2 regressions

	Current #1086	Baseline #484
JS	`10.06MiB` (`+7.99%`)	`9.31MiB`
Other	`499.13KiB` (`+109.86%`)	`237.84KiB`

Bundle analysis report Branch damassi/feat/add-rspack Project dashboard

^{Generated by RelativeCI Documentation Report issue}

damassi added 4 commits November 27, 2024 21:16

wip setup rspack config

b5afd7d

building

48de2d8

building

bc9748f

feat(rspack): everything compiles

194d401

damassi self-assigned this Nov 28, 2024

damassi added the performance label Nov 28, 2024

damassi changed the title ~~WIP => feat(rspack): Migrate from Webpack to RSPack~~ WIP => feat(compiler): Migrate from Webpack to RSPack Nov 28, 2024

fix: everything now runs, but hydration mismatch

50f270b

damassi mentioned this pull request Nov 28, 2024

WIP => feat(compiler): Add RSBuild and streamline app #14928

Open

WIP => feat(compiler): Migrate from Webpack to RSPack #14925

Are you sure you want to change the base?

WIP => feat(compiler): Migrate from Webpack to RSPack #14925

Conversation

damassi commented Nov 28, 2024

Description

artsy-peril bot commented Nov 28, 2024 • edited Loading

rspack-manifest-plugin

rspack-manifest-plugin

Notice

Requirements

Contributing

Install

Usage

Options

assetHookStage

basePath

fileName

filter

generate

map

publicPath

removeKeyHash

seed

serialize

sort

useEntryKeys

useLegacyEmit

writeToFileEmit

Manifest File Descriptor

chunk

isInitial

isModuleAsset

Compiler Hooks

getCompilerHooks

Usage

Notes

Attiribution

Meta

@swc/plugin-styled-components

@swc/plugin-styled-components

Setup

@swc/plugin-relay

@swc/plugin-relay

Setup

Example

Output import paths

@rspack/plugin-react-refresh

@rspack/core

@rspack/core

Documentation

License

@rspack/cli

@rspack/cli

Documentation

License

relativeci bot commented Nov 28, 2024

#1086 Bundle Size — 10.54MiB (+10.47%).

artsy-peril bot commented Nov 28, 2024 •

edited

Loading

`assetHookStage`

`basePath`

`fileName`

`filter`

`generate`

`map`

`publicPath`

`removeKeyHash`

`seed`

`serialize`

`sort`

`useEntryKeys`

`useLegacyEmit`

`writeToFileEmit`

`chunk`

`isInitial`

`isModuleAsset`

`getCompilerHooks`

`@swc/plugin-styled-components`

`@swc/plugin-relay`