10步从 webpack 迁移到vite 过程实录

站长

2023年07月28日 20:37 · 阅读数 15

背景说明

公司的几个老的 React 项目，脚手架用的是 webpack4 + react-dev-utils 搭建的脚手架，随着项目的发展，需求的迭代，项目启动变的越来越慢，粗略数据如下：

模块数量	命令	运行时间
4535	npm start	30 - 60s
4535	npm run build	5- 10min

由于项目自动化部署每次运行流水线，都要重新安装依赖加上打包，总时间都在 7- 10 min 左右！每次项目的启动和发布对团队来说，苦不堪言！对于这种高频的标准化的操作，有必要再快一点！前段时间我在新项目上，尝试了一下 vite, 不管是启动速度打包速度都快的惊人，粗略数据如下：

模块数量	命令	运行时间
4535	npm start	3 - 3.5s
4535	npm run build	21 - 55s

操作步骤

把 public/index.html 移动到项目根目录，把文件中的 %PUBLIC_URL% 去掉
把 src/index.js 入口文件，改成 src/main.jsx ，并在 index.html 文件中引入

  <script type="module" src="/src/main.jsx"></script>

整理一下 package.json , 删除不需要的依赖，如 eslint, babel, webpack,各种 loader 和 plugin 等依赖，修改 scripts, 和devDependencies ：

"devDependencies": {
    "less": "^3.11.1",
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "antd-dayjs-vite-plugin": "^1.1.4", //项目，没有用 ant-design 和 moment 可以不加
    "tslib": "^2.3.0",
    "vite": "^2.4.2",
    "vite-plugin-cesium": "^1.2.5" // 你的项目，没有用 cesium 可以不加
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },

使用 npkill工具，删除 node_modules 文件夹，删除 yarn.lock package-lock.json ，并重新安装依赖
删除 config , scripts 文件夹，这些文件夹，包含了一些 webpack 的配置和启动脚本，如果你的项目没有，可以忽略这一步
在根目录新建 vite.config.js 配置文件，贴出我的配置，仅供参考：

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import cesium from 'vite-plugin-cesium';
import analyze from 'rollup-plugin-analyzer';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        reactRefresh(),
        cesium(),
        antdDayjs(),
        analyze({   // 用户分析包的大小 和 数量
            summaryOnly: true,
            limit: 10, //
        }),
    ],
    base: './',
    resolve: {
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
        alias: [{ find: '@/', replacement: '/src/' }],
    },
    build: {
        outDir: 'build',
        minify: 'terser', // boolean | 'terser' | 'esbuild'
    },
    server: {
        port: 9021,
        host: 'localhost',
        open: '/',
        proxy: {
            '/uniauth': {
                target: 'http://192.168.1.211:30114',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/uniauth/, ''),
            },
        },
    },
});

现在就可以用 npm run dev 启动项目了，但你可能遇到下面这个问题！

10步从 webpack 迁移到vite 过程实录

很明显，所有含有JSX 语法的文件，必需以 jsx 或 tsx 结尾，这了方便省事，我写了一个简单vite 插件来处理，代码如下；

// rename.plugin.js
const path = require('path');
const fs = require('fs');
export default function myPlugin() {
    return {
        name: 'rename-plugin',
        transform(code, id) {
            let fullPath = path.join(__dirname, 'src/');
            if (
                /<([A-Z>]|div|span)/g.test(code) &&
                id.startsWith(fullPath) &&
                id.endsWith('.js')
            ) {
                fs.rename(id, id + 'x', function (err) {
                    if (err === null) {
                        console.log('重命名成功 %s', id + 'x');
                    }
                });

                return {
                    code,
                };
            }
        },
    };
}
// 使用插件很简单，在 vite.config.js 中导入并在 plugins 调用即可
import renamePlugin from './rename.plugin';
// vite.config.js 省略部分代码 
plugins: [
    renamePlugin(),
    reactRefresh(),
    cesium(),
    antdDayjs(),
    analyze({   // 用户分析包的大小 和 数量
        summaryOnly: true,
        limit: 10, //
    }),
]

配置完成后，再次 build 就可以完成重命名，使用完成之后，记得停用这个插件

由于 vite 不支持 require() 导入, 你需要找到你项目中全部的 require 函数进行手工修改，如果你使用了 require.context 一次导入多个文件，你还需要把他们替换成 vite 的语法。参考如下：

let modules = import.meta.globEager(
    '/src/assets/map/icons/water_level{0..9}.png'
);
const water_levels = [];
for (let [key, val] of Object.entries(modules)) {
    water_levels.push(val.default);
}

有的项目中使用了环境变量判断如 process.env.NODE_ENV === 'development' ，也需要修改一下，具体请参考 vite文档
如果你的项目使用了 less，且使用了这样的url url('~@/assets/fonts/youshe.ttf') 使用VScode 搜索替换将 ~@ 替换为 @ 就可以了

写在后面

以上十个步骤是基于我们内部项目，总结出来的。如果你的项目是Vue 项目，这些步骤可能不太适合你，但还是有一定的参考价值~

今天就分享到这儿了，如果你手头也有每天维护，速度缓慢老项目，快快行动起来的吧，感受vite 带给你的极速体验吧~

我是 小西在武汉，如果看了我的文章对你有帮助，记得点赞，收藏~❤️❤️

10步从 webpack 迁移到vite 过程 实录

背景说明

操作步骤

写在后面

10步从 webpack 迁移到vite 过程实录