rspack简介

rspack是字节跳动团队出的前端构建工具，使用rust编写。

在我看来，它是对webpack Api规范的rust实现与优化。

特点：速度快，易于从webpack迁移。

官网：Rspack

rspack在0.2版本，兼容了vue-loader

旧项目packages(主要)

webpack@5.88.2
webpack-cli@5.1.4
@swc/core@1.3.62
swc-loader@0.2.3
swc-plugin-vue-jsx@0.2.5
@core-js@3.31.0
esbuild@0.18.10
esbuild-loader@3.0.1
html-webpack-plugin@5.5.0
less@4.1.3
less-loader@11.1.0
mini-css-extract-plugin@2.7.5
terser-webpack-plugin@5.3.7
vue3-styled-components

旧项目框架介绍

整个项目使用webpack5 + vue3 + tsx构建，不采用vue SFC 单文件。

swc替换babel

swc-plugin-vue-jsx 使其可以正常转换vue3 代码。

得益于swc的构建速度，因此在这套框架下，使得项目的构建时间大大降低。

尝试使用rspack替换webpack以进一步提升构建速度。

调研

rspack.config.js 配置和webpack.config.js 很相似。这更便于从webpack迁移。

读过rspack官网文档，和官网中提供的vue-demo

我很快旧能够搭建起rspack 的平台。

新增依赖

@rspack/cli@0.2.10
@rspack/plugin-html@0.2.10

rspack.config.js

仅列出重要的

javascript 复制代码

const HtmlRspackPlugin = require('@rspack/plugin-html');
module.exports = {
    context: __dirname,
    entry: {...},
    devtools: 'source-map',
    devServer: {...},
    builtins: {
        define: {
            NODE_ENV: process.NODE_ENV,
            __VUE_OPTIONS_API__: 'true',
            __VUE_PROD_DEVTOOLS__:'false'
        }
    },
    resolve: {...},
    externals: {...},
    module: {
        rules: [
            {
                // swc-loader
            },
            {
                test: /\.css$/,
                type: 'css',
            },
            {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true
                            }
                        },
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlRspackPlugin({
            template:'./index.html',
            templateParameters: {
                NODE_ENV: process.env.NODE_ENV
            }
        })
    ]
}

踩坑过程

vue-loader

这里面，虽然官方支持vue-loader，但由于我项目中并不采用.vue SFC 文件，因此没有引入。

vue jsx

官方对于vue jsx 的方案使使用babel-loader 配合@vue/babel-plugin-jsx 进行转换。因为我觉得swc比babel要快，所以直接使用了swc来替换babel。而且swc-loader似乎也兼容，就用了。

虽然rspack 基于swc来转换js代码，但是并未提供swc的配置途径，所以复用不了rspack中内置的swc模块。所以只能外挂一个swc-loader，才能使用swc的插件(swc-plugin-vue-jsx)来对代码进行转换。

html-webpack-plugin

关于html-webpack-plugin，虽然官方提供了builtins.html 配置来取代该插件。但本项目中index.html 模板中使用了 <%if (){%>, <%=xx%> 这样的模板语法，导致运行报错。所以使用了@rspack/plugin-html 来取代html-webpack-plugin

css less

关于样式，本项目使用了less预处理器。可以看到我在less-loader上面还加了css-loader。这和官网文档建议的不一样了，官发说加了type: 'css'后就可以舍弃css-loader，style-loader， MiniCssExtractPlugin.loader 这几个。但是我的项目中，有在.less文件中@import './xxx.css' 的文件，这会导致无法识别而报错。因此加上css-loader解决。

结果

webpack + swc-loader 构建耗时18471ms

rspack + swc-loader 构建耗时 12926ms

速度提升约 30%

猜测速度的提升主要从解析依赖树，生成sourcemap达到。

这只是一个尝试，不敢轻易上生产，仍需多观察。

使用rspack 替换webpack加速vue3项目构建