[项目实战]由 Webpack 到 Vite，提升开发效率！

1. 前言
2. 为什么 Vite 启动这么快
• webpack 启动方式
• Vite 启动方式
3. 我的项目如何植入 Vite
• 新项目
• 已有项目
4. 我在改造过程中遇到的问题
• 1. alias 错误
• 2. 无法识别 less 全局变量
• 3. Uncaught Error: Target container is not a DOM element.
• 4. typings 文件找不到
• 5. 无法识别 svg
• 6. global 未定义
• 7. [未解决] 替代 HtmlWebpackPlugin
• 7. 线上打包构建时， 内存溢出
5. 关于 Vite 开发、打包上线的一些思考
6. 相关代码和结论
• 一个完整的 Vite demo
• 业务项目的 vite.config.js 完整配置
7. 最后

前言

最近，就 前端开发过程中的痛点及可优化项 做了一次收集。 其中，构建耗时、项目编译速度慢 的字眼出现了好几次。

随着业务的快速发展，我们很多项目的体积也快速膨胀。 随之而来的， 就是打包变慢等问题。

提升研发效率，是技术人永恒的追求。

我们项目也有启动慢的问题，同事也提到过几次。 刚好我之前也做过类似的探索和优化， 于是就借这个机会，改造一下项目， 解决启动耗时的问题。

于(2021.4.7 23:00)， 成功嵌入 Vite, 项目启动时间由约 190s => 20s, 热更新时间缩短为 2s。

中间踩了一些坑， 好在最后爬出来了， 相关技术要点都会在下文中呈现。

FBI Warning： 以下文字，只是我结合自己的实际项目, 总结出来的一些浅薄的经验， 如有错误，欢迎指正 :)

今天的主要内容：

• 为什么 Vite 启动这么快
• 我的项目如何植入 Vite
• 我在改造过程中遇到的问题
• 关于 Vite 开发、打包上线的一些思考
• 相关代码和结论

为什么 Vite 启动这么快

底层实现上， Vite 是基于 esbuild 预构建依赖的。

esbuild 使用 go 编写，并且比以 js 编写的打包器预构建依赖, 快 10 – 100 倍。

因为 js 跟 go 相比实在是太慢了，js 的一般操作都是毫秒计，go 则是纳秒。

另外， 两者的启动方式也有所差异。

webpack 启动方式

搞定！

关于 Vite 开发、打包上线的一些思考

从实际使用来看， vite 在一些功能上还是无法完全替代 webpack。

毕竟是后起之秀， 相关的生态还需要持续完善。

个人认为，目前一种比较稳妥的方式是：

• 保留 webpack dev & build 的能力， vite 仅作为开发的辅助

等相关工具再完善一些， 再考虑完全迁移过来。

相关代码和结论

一个完整的 Vite demo

仓库地址： github

业务项目的 vite.config.js 完整配置

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import legacyPlugin from '@vitejs/plugin-legacy';
import { resolve } from 'path';

const fs = require('fs');
const lessToJS = require('less-vars-to-js');
const themeVariables = lessToJS(fs.readFileSync(resolve(__dirname, './src/antd-custom.less'), 'utf8'));
const reactSvgPlugin = require('vite-plugin-react-svg');

// https://cn.vitejs.dev/config/
export default defineConfig({
  base: './',
  root: './',
  resolve: {
    alias: {
      'react-native': 'react-native-web',
      '@': resolve(__dirname, 'src'),
    },
  },
  define: {
    'process.env.REACT_APP_IS_LOCAL': ''true'',
    'window.__CID__': JSON.stringify(process.env.cid || 'id'),
  },
  server: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'https://stoku.test.shopee.co.id/',
        changeOrigin: true,
        cookieDomainRewrite: {
          'stoku.test.shopee.co.id': 'localhost',
        },
      },
    },
  },
  build: {
    target: 'es2015',
    minify: 'terser',
    manifest: false,
    sourcemap: false,
    outDir: 'build',
    rollupOptions: {},
  },
  esbuild: {},
  optimizeDeps: {},
  plugins: [
    // viteSingleFile({
    //   title: 'dynamic title', // doesn't work
    // }),
    reactSvgPlugin(),
    reactRefresh(),
    legacyPlugin({
      targets: [
        'Android > 39',
        'Chrome >= 60',
        'Safari >= 10.1',
        'iOS >= 10.3',
        'Firefox >= 54',
        'Edge >= 15',
      ],
    }),
    // vitePluginImp({
    //   libList: [
    //     {
    //       libName: 'antd',
    //       style: (name) => `antd/es/${name}/style`,
    //     },
    //   ],
    // }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true;@import '${resolve('./src/vars.less')}';`,
          ...themeVariables,
        },
        javascriptEnabled: true,
      },
    },
  },
});

最后

使用 Vite 能大幅缩短项目构建时间，提升开发效率。

不过也要结合项目的实际情况，合理取舍。

对于我的这个项目而言，把 Vite 作为辅助开发的一种方式，还是挺有用的。

期待 Vite 能继续完善，为研发提效。

好了， 内容大概就这么多， 希望对大家有所帮助。

才疏学浅，如有错误， 欢迎指正。

谢谢。