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

JA+

已于 2024-04-09 15:32:59 修改

阅读量1.3k

点赞数

分类专栏：前端工程化文章标签： vue.js 前端 javascript

于 2023-08-04 19:16:53 首次发布

本文链接：https://blog.csdn.net/qq_35459724/article/details/132110449

版权

前端工程化专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章介绍了字节跳动团队开发的前端构建工具Rspack，它是基于rust的webpackAPI实现，具有速度快和迁移方便的特点。作者通过实验证明，使用rspack和swc-loader可以显著减少构建时间，约30%的速度提升主要归功于依赖树解析和sourcemap生成的优化。

摘要由CSDN通过智能技术生成

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: ['less-loader'],
                type: 'css',
                resolve: {
                    preferRelative: 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

rspack 0.5 版本已支持此插件。