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

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

仅列出重要的

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解决。