rspack

A fast Rust-based web bundler πŸ¦€οΈ

MIT License

Downloads
4.7M
Stars
7.4K
Committers
191
View Code on GitHub Visit Website View on X
Ecosystems: JSX (JavaScript XML), TypeScript, JavaScript, Rust

Bot releases are hidden (Show)

rspack - v0.5.0

Published by hardfist 9 months ago

Rspack 0.5.0 is out!

Read the announcement blog post: Announcing Rspack 0.5.

Overview

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.4.5...v0.5.0

rspack - v0.4.5

Published by jerrykingxyz 10 months ago

Highlights

Support compilation.hooks.afterOptimizeModules hook

Called after modules optimization has completed.

compilation.hooks.afterOptimizeModules.tap("plugin_name", function(modules) {
  // do something
})

Support __webpack_is_included__

Test whether or not the given module is bundled by rspack.

if (__webpack_is_included__('./module-a.js')) {
  // do something
}

Support webpackPrefetch and webpackPreload

When doing dynamic import, it is allowed in the magic comments to tell the browser whether the resource will be used in the future.

import(
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'module'
);

Support error early bail

Fail out on the first error instead of tolerating it.

// rspack.config.js
module.exports = {
  //...
  bail: true,
};

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.4.4...v0.4.5

rspack - v0.4.4

Published by IWANABETHATGUY 10 months ago

Highlights

Allow passing function type to splitChunks.cacheGroups 

//...
optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 0,
      cacheGroups: {
        splitLib2: {
          chunks(chunk) {
            console.log(chunk);
            return chunk.name !== "lib1";
          },
          test: /shared\.js/,
          name: "shared",
        },
      },
    },
  },
...

It gives you more flexibility to control code splitting behavior

Allow parse js hashbang syntax

Now rspack can process file like

#!/usr/bin/env node

import { foo } from "./lib";
console.log("index", foo);

A bunch of diagnostics improvement

Rspack
image

Webpack
image

more details you could refer:

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.4.3...v0.4.4

rspack - v0.4.3

Published by h-a-n-a 10 months ago

Highlights

Support optimization.splitChunks.hidePathInfo

Prevents exposing path info when creating names for parts splitted by maxSize.

Support splitChunks.automaticNameDelimiter

By default rspack will generate names using origin and name of the chunk (e.g. vendors~main.js). This option lets you specify the delimiter to use for the generated names. doc

Support splitChunks.cacheGroups.{cacheGroup}.filename

Sets the hint for chunk id. It will be added to chunk's filename. doc

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.4.2...v0.4.3

rspack - v0.4.2

Published by Boshen 11 months ago

Highlights

experiments.rspackFuture.newTreeshaking

the new tree shaking implementation specifically addressing compatibility issues with webpack architecture and optimizing for reduced output size.
(see below for a detailed explanation)

optimization.mangleExports

allow rspack to control export mangling.
(see below for a detailed explanation)

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.4.1...v0.4.2

experiments.rspackFuture.newTreeshaking

This quarter, substantial efforts were dedicated to enhancing tree shaking. While the older tree shaking method remains applicable in most scenarios, it lacks full compatibility with webpack architecture, resulting in divergent behaviors compared to webpack. Additionally, it may produce larger output in certain scenarios when contrasted with webpack. For example, efforts were made to address these issues and optimize tree shaking for improved performance and compatibility.

One of the noteworthy enhancements is the reduction in generated output size. The revamped tree shaking is designed to produce leaner output, particularly when compared to certain scenarios with the previous tree shaking implementation. Here is an example:

source

// index.js
import { a } from './lib.js'
a

// lib.js

export * from './a.js'

// a.js

export const a = 3;
export const b = 3;

package.json

{
  "sideEffects": false
}

rspack.config.js

const rspack = require("@rspack/core");
/** @type {import('@rspack/core').Configuration} */
const config = {
        entry: "./src/index.js",
        plugins: [
        ],
        experiments: {
                rspackFuture: {
                        newTreeshaking: false // `newTreeshaking` disable by default
                }
        },
        optimization: {
                moduleIds:"named", // use nanmed moduleIds and disable `minize` for better demonstration
                minimize: false
        },
};
module.exports = config;

Since the whole module is side effects free, we could directly import a from a.js . This could eliminate lib.js in output.

with old tree shaking

// skip runtime code ...
var __webpack_modules__ = {
"./src/a.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
  a: function() { return a; }
});
 const a = 3;
 const b = 3;
}),
"./src/index.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */var _lib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lib */"./src/lib.js");

_lib__WEBPACK_IMPORTED_MODULE_0__.a;
}),
"./src/lib.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a */"./src/a.js");
__webpack_require__.es(_a__WEBPACK_IMPORTED_MODULE_0__, __webpack_exports__);

}),

}

with new tree shaking

enable experiments.rspackFuture.newTreeshaking

const rspack = require("@rspack/core");
/** @type {import('@rspack/core').Configuration} */
const config = {
        // ...
        experiments: {
                rspackFuture: {
-                        newTreeshaking: false
+                        newTreeshaking: true 
                }
        },
        // ...
};
module.exports = config;
output 
 var __webpack_modules__ = {
"./src/a.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
  a: function() { return a; }
});
 const a = 3;
 const b = 3;
}),
"./src/index.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */var _lib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lib */"./src/a.js");

_lib__WEBPACK_IMPORTED_MODULE_0__.a;
}),

}

The new treeshaking implementation is still undergoing stability testing; hence, it remains disabled by default. If you wish to experiment with it, you can enable it by using the following:

const rspack = require("@rspack/core");
/** @type {import('@rspack/core').Configuration} */
const config = {
        // ...
        experiments: {
                rspackFuture: {
                        newTreeshaking: true 
                }
        },
        // ...
};
module.exports = config;

more details you could refer:
https://www.rspack.dev/config/experiments.html#experimentsrspackfuturenewtreeshaking
and related options:

  1. usedExports
  2. innerGraph
  3. providedExports
  4. sideEffects

optimization.mangleExports

optimization.mangleExports allows to control export mangling.
Reuse the previous example, making slight modifications for a better explanation.

// index.js
- import { aaa } from './lib.js'
+ import { aaa } from './lib.js'
- a
+ aaa

// lib.js

export * from './a.js'

// a.js

- export const aaa = 3;
+ export const aaa = 3;
export const b = 3;

Enable experiments.rspackFuture.newTreeshaking and optimization.mangleExports

Output

The export of module src/a.js was condensed into a single letter, leading to a decrease in the overall output size.

var __webpack_modules__ = {
"./src/a.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
  P: function() { return aaa; }
});
 const aaa = 3;
 const b = 3;
}),
"./src/index.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */var _lib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./lib */"./src/a.js");

_lib__WEBPACK_IMPORTED_MODULE_0__.P;
}),

}

Note this feature is not stable yet, and requires experiments.rspackFuture.newTreeshaking to be enabled.

rspack - v0.4.1

Published by ahabhgk 11 months ago

Highlights

  • Support compiler.hooks.shouldEmit hook: Return a boolean telling whether to emit.
  • Support compilation.hooks.childCompiler hook: Executed after created a childCompiler.
  • Support function type splitChunks.cacheGroups.{cacheGroup}.test

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.4.0...v0.4.1

rspack - v0.4.0

Published by h-a-n-a 11 months ago

Rspack 0.4.0 is out!

Read the announcement blog post: Announcing Rspack 0.4.

Overview

Migrating from v0.3

Check out our migration guide for in-depth migration details.

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.14...v0.4.0

rspack - v0.3.14

Published by hardfist 11 months ago

What's Changed

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.13...v0.3.14

rspack - v0.3.13

Published by hardfist 11 months ago

Highlight

This version contains a hotfix of https://github.com/web-infra-dev/rspack/issues/4643

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.12...v0.3.13

rspack - v0.3.12

Published by jerrykingxyz 11 months ago

Highlight

support EntryDescription.library

Bundling this entry as a library, and allows you to configure the library format through this option, enabling the generation of different module formats (CommonJS, global variable, ESModule, etc.). This flexibility ensures that your code can be easily used in various environments. Additionally, this feature serves as a prerequisite for Module Federation.

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.11...v0.3.12

rspack - v0.3.11

Published by IWANABETHATGUY 12 months ago

Highlights

Support WarnCaseSensitiveModulesPlugin

support WarnCaseSensitiveModulesPlugin

Fix issue when optional expression has an imported variable

The bug fix in this release ensures that optional chaining works flawlessly. For more details, you could refer to https://github.com/web-infra-dev/rspack/pull/4502

support asset info source filename

Now compilation.getAsset(chunkFile) can return sourceFilename correctly.

bump swc

Bump swc-core from 0.86.9 to 0.86.33

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.10...v0.3.11

rspack - v0.3.10

Published by h-a-n-a 12 months ago

Highlights

monaco-editor-webpack-plugin support

Support monaco-editor-webpack-plugin, you can see example using monaco-editor-webpack-plugin in example-monaco-editor-webpack-plugin
WebWorkerTemplatePlugin and LimitChunkCountPlugin are supported at the same time. Really appreciate for @SyMind 's great work!

Optimized performance for builtin:swc-loader

builtin:swc-loader can now pass AST back to rspack core. Check out performance between legacy transforming and transforming with builtin:swc-loader

Support Compiler.compile()

We have implemented support for Compiler.compile to ensure smooth operation of ο»ΏchildCompiler

Support dynamicImportMode: "eager"

For runtime that does not support dynamically loading JavaScript chunks, module.parser.javascript.dynamicImportMode: "eager" is exactly what you're looking for.

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.8...v0.3.10

rspack - v0.3.8

Published by Boshen 12 months ago

Highlights

Top-level await

Support top-level await and enabled by default, or you can disable this by experiments.topLevelAwait = false.
Top-level await can only be used in ECMAScript Module (type: "javascript/esm"), with this feature you can use await at top-level, await resources, await import, etc.

const db = await import('./db.js');
const connection = await db.connect();

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.7...v0.3.8

rspack - v0.3.7

Published by ahabhgk about 1 year ago

Highlights

experiments.rspackFuture.newResolver

This feature enables the new resolver implementation provided by oxc, which is 5 times faster than the previous resolver implementation.
The new resolver also supports tsconfig project references defined in tsconfig-paths-webpack-plugin, which handles the support of nested paths alias inside project references.
To fully opt-in this feature, use the following configuration or see resolve.tsConfig for details.

module.exports = {
  resolve: {
    tsconfig: {
      configFile: path.resolve(__dirname, './tsconfig.json'),
      references: 'auto'
    },
  }
  experiments: {
    rspackFuture: {
      newResolver: true
    }
  }
}

styled-components support

This feature enables the builtin:swc-loader to provide compile-time support for styled-components. Now you can configure it through options.rspackExperiments.styledComponents.

/** @type {import('@rspack/core').Configuration}*/
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "builtin:swc-loader",
        options: {
          jsc: {
            parser: {
              syntax: "ecmascript",
              jsx: true
            }
          },
          rspackExperiments: {
            styledComponents: {
              displayName: true,
              ssr: true,
              fileName: true,
              meaninglessFileNames: ["index", "styles"],
              namespace: "rspack-test",
              topLevelImportPaths: [
                "@xstyled/styled-components",
                "@xstyled/styled-components/*"
              ],
              transpileTemplateLiterals: true,
              minify: true,
              pure: true,
              cssProps: true
            }
          }
        }
      }
    ]
  }
};

SWC's support for styled-components is essentially aligned with the official Babel plugin, so you can visit babel-plugin-styled-components for more information.

Vue2 css extract support

Finished support for experiments.css for Vue2, you can extract css with our custom vue-loader (@rspack/loader-vue2).
First, add our custom vue-loader to package.json

{
  "devDependencies": {
    "vue": "2.7.14",
    "vue-loader": "npm:@rspack/[email protected]"
  }
}

Then, enable vue-loader with experimentalInlineMatchResource just like how you did with Vue3:

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              // to extract css, you should enable this
              experimentalInlineMatchResource: true
            }
          }
        ]
      }
    ]
  },
  experiments: {
    css: true
  }
};

Check out the example for details.

Rspress 1.0

Rspress is a static site generator based on Rspack and mdx-rs. It is 5~10 times faster than Docusaurus/Nextra and supports lots of nice features out of the box, such as i18n, full-text search, component preview and etc.
See detail in https://github.com/orgs/web-infra-dev/discussions/5

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.6...v0.3.7

rspack - v0.3.6

Published by JSerFeng about 1 year ago

What's Changed

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.5...v0.3.6

rspack - v0.3.5

Published by IWANABETHATGUY about 1 year ago

Highlights

rspackFuture.disableTransformByDefault

Default transformation was a default strategy for transform introduced v0.1.x. This introduced ton of problems during our daily development. For example, excluding node_modules for certain libraries are not supported, thus, which results in some mis-transformations.
From now on, you can opt-in experiments.rspackFuture.disableTransformByDefault = true to disable the internal transformations. This greatly aligns Rspack with Webpack architecture. By enabling this option, these few options are not able to use anymore:

Builtin types(Rule.type) are removed in favor of webpack's web-standard bundling:

  • jsx, jsx/auto, jsx/esm, jsx/dynamic
  • ts, tsx

We will come up a new strategy to add back these DX friendly features in the future.
Instead, builtin:swc-loader is added for fine-grained transformation.
Please refer to this guide for the migration and details.

react-refresh migration

In this version, we'd like to introduce a better way to enable react fast refresh with @rspack/plugin-react-refresh, which is more powerful and flexible than builtins.react.refresh = true, now you can use it with builtin:swc-loader, swc-loader, or babel-loader.
Checkout docs for more details

Deprecating builtin:sass-loader

builtin:sass-loader is deprecated in favor of sass-loader. You can still use it in this and the next minor version. It will be officially removed in v0.5.0. See this for our deprecation stages.

Optimize the progress bar style

  • Thinner and shorter lines
  • Removed progress text
  • Green color

Preview:

https://github.com/web-infra-dev/rspack/assets/7237365/b11fd939-560d-4a47-83c3-f81a136bae3d

What's Changed

Something

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.4...v0.3.5

rspack - v0.3.4

Published by h-a-n-a about 1 year ago

Highlight

Internal plugins

To further improve Rspack's compatibility with webpack ecosystem, we implemented internal plugins in Rspack.
For example, you can use rspack.XxxPlugin in your configuration.

const rspack = require('@rspack/core');

module.exports = {
  plugins: [
    new rspack.DefinePlugin({ 'process.env.NODE_ENV': "'production'", }),
    // In addition to webpack's existing plugins, some of the plugins implemented
    // in rust in Rspack are also exported by internal plugins
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
  ],
};

Or use compiler.webpack.XxxPlugin in your plugin.

class ReactRefreshRspackPlugin {
  apply(compiler) {
    const reactRefreshPath = require.resolve("../client/reactRefresh.js");
    const reactRefreshEntryPath = require.resolve("../client/reactRefreshEntry.js");
    new compiler.webpack.EntryPlugin(compiler.context, reactRefreshEntryPath, {
      name: undefined
    }).apply(compiler);
    new compiler.webpack.ProvidePlugin({
      $ReactRefreshRuntime$: reactRefreshPath
    }).apply(compiler);
  }
};

See

@rspack/plugin-react-refresh

Thanks to the implementation of internal plugins, we can now easily implement the @rspack/plugin-react-refresh, which was coupled into @rspack/dev-server before.
Now, if you are using a custom dev server instead of @rspack/dev-server or @rspack/cli, you can easily enable react fast refresh by adding the @rspack/plugin-react-refresh plugin.
See

Compatible with html-webpack-plugin

Rspack is now html-webpack-plugin compatible!

const path = require("node:path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "pug-loader!" + path.join(__dirname, "template.pug")
    })
  ]
}

See

builtin:swc-loader supports builtin transformations

These fields served as the alternative to the current builtin transform options, aiming to support transforming with respect to the certain module.

type RspackExperiments = {
  react?: ReactOptions;
  import?: PluginImportOptions;
  emotion?: EmotionOptions;
  relay?: RelayOptions;
};

For example, integrating emotion transformation in the project:

module.exports = {
  module: {
    rules: [
      {
         test: /\.jsx$/,
         exclude: /node_modules/,
         loader: "builtin:swc-loader",
         options: {
            jsc: {
              parser: {
                syntax: "ecmascript",
                jsx: true,
              }
            },
            rspackExperiments: {
              emotion: true
            }
         }
      }
    ]
  }
}

See

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.2...v0.3.4

rspack - v0.3.2

Published by Boshen about 1 year ago

What's Changed

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.1...v0.3.2

rspack - v0.3.1

Published by ahabhgk about 1 year ago

Highlight

Support option resolveLoader

With this option, you can specify the resolving strategy for each loader.

For example, if you are developing a loader and want to showcase its usage from a user's perspective in an example, you can write:

module.exports = {
  resolveLoader: {
    alias: {
      'amazing-loader': require.resolve('path-to-your-amazing-loader'),
    },
  },
};

Then, in the example code, you can write:

require('!!amazing-loader!./amazing-file.js');

See more

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.3.0...v0.3.1

rspack - v0.3.0

Published by hardfist about 1 year ago

Rspack 0.3.0 is out!

Read the announcement blog post: Announcing Rspack 0.3.

Overview

What's Changed

Performance Improvements ⚑

Exciting New Features πŸŽ‰

Bug Fixes 🐞

Other Changes

New Contributors

Full Changelog: https://github.com/web-infra-dev/rspack/compare/v0.2.12...v0.3.0

Package Rankings
Top 1.66% on Npmjs.org
Top 32.16% on Crates.io
Related Projects
rollup-extras

Collection of rollup plugins

02 Dec 2021 13
frontend-boilerplate

An ES20XX starter with common frontend tasks using Webpack 5 as module bundler and npm scripts as...

07 Jul 2014 227
rockpack

Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling...

26 Oct 2019 568