rspack迁移vue-element-admin实践指南

知了清语2024-01-26 15:53

背景

前端不断在探索打包，构建的天花板，产出了 vite ， Rspack， Turbopack 等一系列优秀的打包构建工具

在好奇心的驱使下， 尝试 以 vue-element-admin 这个仓库作为改造目标， 首先向我们的前辈 【花裤衩】致敬！ 产出如此优秀的后台管理系统模版

  • 这个仓库代表了大部分的国内中后台系统， 它改造通过，且数据惊人，会在一定程度上驱使大家尝试Rspack
  • 仓库基于 @vue/cli @4.4.4 版本， 背后是 webpack @4.x ， 我们亲自尝试一下，从 webpack 迁移到Rspack需要改造哪些内容
  • 该仓库包含了N种基础的业务（echart， 拖动， element-ui），看看我们接入Rspack对业务的侵入性有多大
  • 从实际数据看，Rspack VS webpack 冷启动，HMR， 打包耗时，是否有巨大提升

步骤

所有操作均基于 npm 安装包依赖， 未使用 pnpm

基于webpack启动项目

先说明一下， 老的原始代码，是基于 node: 14.21.3 运行的， 高版本的Node 可能有些 npm包不兼容，无法启动项目

  1. 下载仓库代码
bash 复制代码 
git clone https://github.com/PanJiaChen/vue-element-admin.git
  1. 移除掉富文本相关的内容， 这个在 node 14.21.3 下面，否则无法启动项目

package.json

json 复制代码 
"tui-editor": "1.3.3",

移除这个包

有几个字段也移除一下， 虽然没啥影响

json 复制代码 
 "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
 "browserslist": [
    "> 1%",
    "last 2 versions"
  ],

移除业务代码入口，或者直接注释掉

js 复制代码 
src/components/MarkdownEditor/default-options.js

src/components/MarkdownEditor/index.vue

// 移除路由入口
src/router/modules/components.js

启动项目, 查看耗时

71.495 s

打包时间也挺久，没有记录，大家可以clone 我 gitee 仓库的 master分支代码，自行尝试

下面上我们的 主菜

基于rspack启动项目

原始的package.json里面的 devDependencies 有很多依赖，全部干掉，重新从0开始配置

新建一个分支， 我是把 github 原仓库的代码， clone 到自己的 gitee 仓库，解决了 报错

现在我们基于 gitee 仓库的 master分支开始改造步骤

shell 复制代码 
git checkout -b rspack

安装rspack 依赖

node 可以使用 20.10.0

shell 复制代码 
npm i @rspack/cli @rspack/core -D

安装 vue-laoder

vue2 只能安装到如下版本

shell 复制代码 
npm i vue-loader@15.11.1 vue-style-loader@4.1.3 -D

原始仓库项目使用的是 vue2.6版本， 这里我们顺便升级为 2.7.16

shell 复制代码 
npm i vue@2.7.16 -S

对了， vue 在 2.7 以后，就不需要 vue-template-compiler 这个包了，大家都知道吧。 😊😊😊 快去检查一下你们公司的项目。

配置sass/less

是的，这些包，在使用当前文档，均为最新！最新！最新！ 版本

css 复制代码 
npm i less less-loader sass sass-loader -D

到此，我们已经安装了基础的所需要的依赖

配置静态资源（图片，svg, 字体文件）

webpack 使用 module.rules ， rspack也是一样的

js 复制代码 
module.exports = {
    module: {
        rules: [
          {
            test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
            type: 'asset/resource',
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset',
          }
        ]
    }
}

如果是原始的基于 webpack 而非 @vue/cli 脚手架的配置， 这块可以copy过来， 静态资源也不需要指定 loader

rspack 内置帮我们处理好了， 指定 type 字段即可， 这里跟最新的 webpack@5 的用法一致

路由中省略.vue的问题，无法直接识别vue文件

见下面的 extensions

处理 vue文件

不管是基于 webpack 还是 rspack， 还是 vite， 都不能直接识别 .vue文件， 都是通过 插件等将.vue转成普通的js语法

js 复制代码 
const path = require('path')
const { VueLoaderPlugin } = require("vue-loader");
const { defineConfig } = require("@rspack/cli");

module.exports = defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, 'src')
        },

        extensions: [".js", ".json", ".wasm", '.vue', '.jsx', '.tsx']
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "vue-loader",
                        options: {
                          experimentalInlineMatchResource: true
                        }
                    }
                ]
            },
        ]
    }
})

vue2 支持jsx

jsx语法在 vue的生态真是个麻烦的东西，确实，如果手摸手 配置过 rollup 打包 vue2 且支持jsx， webpack 处理vue2的jsx ，就能体会这句话

loader 可能不更新了，然后生态断层了等等问题 😭😭😭

sql 复制代码 
npm i @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D

调整 rspack.config.js

js 复制代码 
const path = require('path')
const { defineConfig } = require("@rspack/cli");

module.exports = defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    },

    extensions: [".js", ".json", ".wasm", '.vue', '.jsx', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@vue/babel-preset-jsx", { compositionAPI: true }]
            ]
          }
        }
      },
    ]
  }

})

这里我们添加了 babel-loader, @vue/babel-preset-jsx , 还有上面的 文件后缀扩展的支持

以前在vue里面直接写 render jsx 语法，是不需要 写lang="jsx", 这里 稍微改一下

process.env 改造

vite 还有 @vue/cli 都可以读取 项目根目录里面的 .env 文件， 这里依旧实现

shell 复制代码 
npm i dotenv dotenv-expand -D

dotenv-expand 是让 env 文件中支持变量的包

js 复制代码 
const { defineConfig } = require("@rspack/cli");

const env = process.env.NODE_ENV || "development";
const dotEnvFiles =
  env === "development" ? [".env.development"] : [".env.production"];

dotEnvFiles.forEach((doteEnvFile) => {
  let content = dotenv.config({ path: doteEnvFile })
  console.log('读取到的内容');

  console.log(content);
  expand(content)
});
const VUE_APP = /^VUE_APP_/i;

const filterEnv = {};
const define = Object.keys(process.env)
  .filter((key) => VUE_APP.test(key))
  .reduce((env, key) => {
    filterEnv[key] = process.env[key];
    env[`process.env.${key}`] = JSON.stringify(process.env[key]);
    return env;
  }, {});

module.exports = defineConfig({
  plugins: [
    new rspack.DefinePlugin({
      "process.env": JSON.stringify(filterEnv)
    })
  ]
})

在页面等使用到 process.env.xxx的地方测试一下，变量是否注入

我们在 .env.development 文件中，看到有这个 VUE_APP_BASE_API

测试接口， 已经注入到 axios的 baseURL 中

mockjs改造

我们前面删除了所有的 dev 依赖， 这里重新安装

shell 复制代码 
npm i mockjs -D

在 vue.config.js 中我们这样去配置 mock 服务， 我们在 rspack 需要类似配置

js 复制代码 
const { defineConfig } = require("@rspack/cli");

module.exports = defineConfig({
	devServer: {
    historyApiFallback: true,

    setupMiddlewares (middlewares, devServer) {
      let server = require('./mock/mock-server.js')

      server(devServer.app)

      return middlewares
    }
  },
})
bash 复制代码 
http://localhost:8080/dev-api/vue-element-admin/user/info?token=admin-token

vscode终端，有日志输出

解决index.html中变量问题

html 复制代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

里面有变量： BASE_URL， 目前rspack 还不认识， 但是我们一般期望在运行后， 替换为 /favicon.cion 这种， 或者类似于 publicPath 等

js 复制代码 
module.exports = defineConfig({
	plugins: [
    new rspack.HtmlRspackPlugin({
      template: "./public/index.html",
      templateParameters: {
        BASE_URL: '/'
      }
    }),
  ]
})

重启项目，终端就不会报错， 目前图标正常展示

解决element-ui样式编译问题

原项目中，直接引入的是 element-ui的 scss 文件，我们现在不直接使用这个文件， 直接使用编译好的css文件

因为我们现在下载的 sass 属于比较新的版本， element-ui用的以前的版本node-sass 去编译的 element-ui 里面的sass文件

js 复制代码 
// element-ui@2.15.14
"node-sass": "^4.11.0",

语法存在较大差异， sass语法的变化在 sass官网有说明

main.js

js 复制代码 
import Element from 'element-ui'
// 之前在src/styles/element-variables.scss 里面引入，去掉，改为这里引入
import 'element-ui/lib/theme-chalk/index.css';

sass变量在vue中使用问题

sass变量一般是不能直接在 vue中直接导入使用的，现在改一下实现

侧边栏 组件 有使用 sass 里面的一些变量

src/layout/components/Sidebar/index.vue

删除掉导入， 都是非标准的一些用法， 我们现在改为 css 原生支持的 变量实现，效果是一样的

上面 template 中的部分不用改任何代码， 修改 computed 计算属性

js 复制代码 
<script>
  export default {
    computed: {
      variables() {
        // 去掉，只要保证我们导出一个上面模版可以使用的对象即可
        // return variables
        return {
          menuBg: 'var(--menuBg)',
          menuText: 'var(--menuText)',
          menuActiveText: 'var(--menuActiveText)'
        }
      },
    }
  }
</script>

现在我们稍微修改一下 scss文件

styles/variables.scss

scss 复制代码 
:root {
  --menuText: #{$menuText};
  --menuActiveText: #{$menuActiveText};
  --subMenuActiveText: #{$subMenuActiveText};
  --menuBg: #{$menuBg};

  --menuHover: #{$menuHover};
  --subMenuBg: #{$subMenuBg};
  --subMenuHover: #{$subMenuHover};
  --sideBarWidth: #{$sideBarWidth};
}

这里变量名都没有改，是避免原始代码中 template 里面也要改字段，比较麻烦，保持代码前后统一问题

vue SFC 单文件中的sass语法改造问题

src/components/MDinput/index.vue

js 复制代码 
<style lang="scss" scoped>
  // 需要引入这个
@use "sass:math";

$bottomPadding: $spacer - $apixel * 10;
$leftPadding:  math.div($spacer,2);

.material-input {
  // 原来： padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
  padding: $spacer $spacer  $bottomPadding  $leftPadding;
}
</style>

主要就是 sass除法的改造, 这在 sass 废弃语法中有提到

解决svg图标不展示问题

这个主要是svg-sprite-loader 可能跟 webpack 5.x 的一个适配问题导致的， 在 rspack的 issue中我也有提到 Issue #5450 · web-infra-dev/rspack, 调试了一下，没有解决。

我们从代码里面看，本质是svg 加载的问题

目前官方并没有说明svg 属于一等公民，暂时没有很好的处理方式，简单粗暴的，把代码copy到 index.html中

或者直接把svg 作为普通的HTML 放在 vue组件中

vue2 官方文档有说明 svg在 vue中如何使用，我们项目如果迁移到 rspack ， 这个也不是什么大问题。我在rspack改造完本项目以后，也试一下， 就把svg当做普通的HTML 拷贝到某个vue文件中，可以加载svg

echart 报错

javascript 复制代码 
ReferenceError: exports is not defined

升级echart 到 V5版本，修改vue中引用的方式

js 复制代码 
"echarts": "4.2.1", 升级到 "echarts": "^5.4.3",
js 复制代码 
import * as echarts from 'echarts';

别的不需要改

element-ui 表格 空白问题

css 复制代码 
npm i element-ui@2.9.0 -S

降低element-ui 版本

有说跟 core-js 版本太高有关系。

参考链接

打包指定输出目录

js, css ，图片做分类

js 复制代码 
module.exports = defineConfig({
  output: {
    clean: true,
    filename: 'js/[name].js',
    cssFilename: 'css/[name].css',
    assetModuleFilename: 'assets/[hash][ext]'
  },
})

接入Rsdoctor

截止到 2024-01-26 这个插件在 rspack中会报错，相信官方团队很快会解决 Bug #158
介绍： Rspack 和 Webpack 构建分析器

Rsdoctor 地址

shell 复制代码 
npm add @rsdoctor/rspack-plugin -D

安装 cross-env

shell 复制代码 
npm i cross-env -D

在 package.json中增加一个 脚本

json 复制代码 
"scripts": {
    "doctor": "cross-env RSDOCTOR=true npm run build"
},
shell 复制代码 
npm run doctor
js 复制代码 
// 分析插件
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

let plugins = [
  new VueLoaderPlugin(),
  new rspack.HtmlRspackPlugin({
    template: "./public/index.html",
    templateParameters: {
      BASE_URL: '/'
    }
  }),

  new rspack.DefinePlugin({
    "process.env": JSON.stringify(filterEnv)
  }),

]

// 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
if (process.env.RSDOCTOR) {
  plugins.push(
    new RsdoctorRspackPlugin({
      // 插件选项
    })
  )
}

部分小毛病

  • 目前项目中有的 .vue 文件的 热更新存在问题，改动了内容以后，热更新失效了，需要重启项目才可以，官方已经在跟进 vue2项目，热更新失效 · Issue #5445 · web-infra-dev/rspack (github.com)
  • rsdoctor目前有一点点兼容问题， 前面也说到了，相信不久就可以解决，问题不大。
  • svg 这个loader 生态接入问题，如果项目没有非要跟webpack 项目一样的效果，其实无影响

这些其实相比 rspack带来的变化，可以忽略

还有 rspack 跟 webpack其实是一脉的， 项目越大， 路由越多， vite生态 + vue 可能在路由跳转上并没有那么丝滑，这个问题目前vite也解决不了， rspack 因为打包了资源，资源也都下载到客户端了，所以，不会存在切换路由的卡顿感， 处理机制不一样

完整配置 rspack.config.js

或者去仓库 vue-element-admin rspack分支 copy 查看， 因为rspack 升级后，我可能不定期跟着更新，测试rspack的变化

rspack.config.js

js 复制代码 
const path = require('path')
const rspack = require("@rspack/core");
const { VueLoaderPlugin } = require("vue-loader");
const { defineConfig } = require("@rspack/cli");

const dotenv = require('dotenv')
const { expand } = require('dotenv-expand')
// 分析插件
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');


const env = process.env.NODE_ENV || "development";
const dotEnvFiles =
  env === "development" ? [".env.development"] : [".env.production"];

dotEnvFiles.forEach((doteEnvFile) => {
  let content = dotenv.config({ path: doteEnvFile })
  // console.log('读取到的内容');

  // console.log(content);
  expand(content)
});
const VUE_APP = /^VUE_APP_/i;

const filterEnv = {};
const define = Object.keys(process.env)
  .filter((key) => VUE_APP.test(key))
  .reduce((env, key) => {
    filterEnv[key] = process.env[key];
    env[`process.env.${key}`] = JSON.stringify(process.env[key]);
    return env;
  }, {});

// console.log('拿到的内容');
// console.log(define);

let plugins = [
  new VueLoaderPlugin(),
  new rspack.HtmlRspackPlugin({
    template: "./public/index.html",
    templateParameters: {
      BASE_URL: '/'
    }
  }),

  new rspack.DefinePlugin({
    "process.env": JSON.stringify(filterEnv)
  }),

]

// 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
if (process.env.RSDOCTOR) {
  plugins.push(
    new RsdoctorRspackPlugin({
      // 插件选项
    })
  )
}

/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = defineConfig({
  context: __dirname,
  entry: {
    main: "./src/main.js"
  },
  output: {
    clean: true,
    filename: 'js/[name].js',
    cssFilename: 'css/[name].css',
    assetModuleFilename: 'assets/[hash][ext]'
  },

  devServer: {
    historyApiFallback: true,

    setupMiddlewares (middlewares, devServer) {
      let server = require('./mock/mock-server.js')

      server(devServer.app)

      return middlewares
    }
  },
  plugins,

  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    },

    extensions: [".js", ".json", ".wasm", '.vue', '.jsx', '.tsx']
  },
  module: {
    rules: [

      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              experimentalInlineMatchResource: true
            }
          }
        ]
      },

      {
        test: /\.[jt]sx$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@vue/babel-preset-jsx", { compositionAPI: true }]
            ]
          }
        },

      },

      {
        test: /\.less$/,
        loader: "less-loader",
        type: "css",

      },
      {
        test: /\.scss$/,
        loader: "sass-loader",
        type: "css",
        exclude: /node_modules/,

      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset',
      }
    ]
  }
})

改动的步骤细节

改动的每一个细节，我都单独的提交一个 commit, 希望如果你有改造业务系统的计划，可以有帮助和参考

仓库地址： vue-element-admin

最终

好了， 到此，我们改造了这个仓库，里面所有涉及的坑全部排查完毕， 也给出了对应的解决方案， 我们来看一看最终的成绩吧 😊😊😊

运行效果截图

构建耗时

对比webpack， 成绩相当不错（撒花 😊）， 构建时间从 71.495s 到 6s 。

Rspack 打包时间在 3.87s

结语

总之：牛逼~

希望rspack 继续发力，兼容前端大部分的应用场景

文章编写不易，希望给一个小小的 点赞，转发， 谢谢

再贴一次仓库地址： gitee.com/luoriwushen...

相关推荐
小白学前端66638 分钟前
React Router 深入指南：从入门到进阶
前端·react.js·react
web130933203981 小时前
前端下载后端文件流，文件可以下载，但是打不开，显示“文件已损坏”的问题分析与解决方案
前端
学前端的小朱1 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿1 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08212 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
m0_748241122 小时前
Selenium之Web元素定位
前端·selenium·测试工具
风无雨2 小时前
react杂乱笔记(一)
前端·笔记·react.js
前端小魔女2 小时前
2024-我赚到自媒体第一桶金
前端·rust
鑫~阳3 小时前
快速建站（网站如何在自己的电脑里跑起来） 详细步骤 一
前端·内容管理系统cms
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）