你不知道的vitejs

湾里晴空
315 阅读3分钟
  • 写在前面： 最近vite非常火，抽点下班时间学习了下vite的使用，在这里小白总结下

为什么是vite

众所周知，现在前端界打包工具流行的有两个：

  • webpack侧重点在全面细致，能对各种类型文件进行打包，并且可以深度定制化打包逻辑；
  • rollup侧重对js打包，重点发力在打包工具库，打包体积更小。

但是随着业务代码的增长，上述两种打包工具在构建过程中都会不可避免变慢，如何提升构建速度，提升开发者效率？

image.png （webpack打包）

image.png （vite打包）

由于浏览器开始原生支持ES模块，使得浏览器接管现有打包器部分工作成为可能：

  • Vite 只需要在浏览器请求基于路由拆分的代码模块时进行转换并按需提供源码。即只在当前屏幕上实际使用时才会被处理。
  • 而以webpack为代表的打包工具是基于依赖图先将所有的文件都打包成浏览器可运行的bundle之后，才会到浏览器处理
  • 上述两点导致： webpack打包会随着业务代码越来越大，构建速度越来越慢；但是vite由于是基于浏览器路由按需加载，所以打包速度不会随着业务代码增大提升。

不得不谈的esbuild

image.png

  • esbuild是Esbuild 是基于Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快10~100 倍

esbuild使用场景：

在开发环境构建时

  • 通过入口分析依赖树，收集 node_modules 中的依赖，提前打包处理，并在磁盘持久化缓存处理过后的文件(将依赖预构建)。

  • 对部分业务文件 使用 esbuild进行编译，比如 ts、jsx、tsx转成js。并且会预构建,将 CommonJS / UMD 转换为 ESM 格式

  • 在生产环境打包使用rollup, 而不是用esbuild

开发环境和生产环境不同

  • vite推荐在开发环境构建时使用基于esbuild, 因为构建速度快
  • 尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。
  • 为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存），即使用rollup打包
  • esbuild在代码分割和 CSS 处理方面不够完善，rollup更成熟灵活，因此生产构建用rollup

vite中rollup和esbuild的关系

  • Vite 在开发环境基于esbuild模拟 Rollup 的行为 ，在生产环境打包时，将这部分替换成 Rollup 打包
  • vite兼容了rollup的插件，即可以使用rollup的插件生态，也可以使用自己的vite插件生态

最后改造自己的vue3代码

自己之前是基于vue3 + webpack ,现在试试用下vite改造下 在根目录下创建 vite.config.js,

    import {defineConfig} from 'vite';
    import path from 'path';
    import vue from '@vitejs/plugin-vue';

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            src: path.resolve(__dirname, 'src'),
        },
        extensions: ['.js', '.vue'],
    },
    plugins: [vue()],
    server: {
        host: 'cmsgo-sandbox.baidu-int.com',
        proxy: {
            '/all_plantform_config': {
                target: 'http://dongyang.bcc-bdbl.baidu.com:8087',
                changeOrigin: true,
            },
            '/oss': {
                target: 'http://dumioss.baidu-int.com',
                changeOrigin: true,
            },
        },
    },
})

同时在根目录中创建index.html, 浏览器直接获取该index.html并基于依赖渲染路由模块

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

解决一些代码内部问题，即可在浏览器实现渲染，确实效果很不错，之前基于webpack至少是五秒构建，现在一秒内解决战斗，很丝滑。 决定以后开发构建就用vite, 在线上可以还是用现在的webpack不用变

avatar
文章
阅读
粉丝