又快又小的Vite

这篇文章本月发布，但因个人语言不当和判断力不佳而被删除。我想再次向沃拉尔·作者道歉。我已联系作者并道歉。我会再三考虑下一篇文章中的笑话，希望你能理解。

“家豪，新的H5项目是否应该与Vite完全整合？”听到这句话，被Webpack毁掉的我留下了幸福的泪水？

需要澄清一下，我们的项目H5很小，只能通过短信链接打开。像这样的小项目，最好练习一些新的姿势技巧，所以不要盲目跟风！

Vite

首先Vite这个词怎么说呢？ “歪特？v Te？维特？”

对于这个问题，官方文档第一句话就给出了答案：Vite（法语单词“快”，发音为/vit/），法语：快！当我看到Vite这个名字的时候，我就觉得有达也想打造属于自己的V宇宙。

跑？‍♂️

Vite提供了一个非常方便的项目启动工具：

yarn create @vitejs/app project-name --template vue-ts
 

首先，Vite只是一个打包工具，和平常的Webpack/Rollup/Parcel、to、与没有任何关系 Vue. 非常相关，也适用于 React。创建项目后，可以运行命令yarn serve打开本地dev环境：

{
  "scripts": {
    "dev": "vite", // start dev server
    "build": "vite build", // build for production
    "serve": "vite preview" // locally preview production build
  }
}
 

经常使用Webpack的开发者应该知道，启动dev环境需要八秒、九秒甚至十秒的时间，但是❀❀！

玉液宫酒一百八十杯。为什么这么快？听我告诉你...你们一定听说过那个CTO不努力，沉迷于开源和快写（我想称其为世界上最快的公司）的公司）。男）打包工具-esbuild。启动本地开发环境时使用Vite时，esbuild：

// vite/dist/node/chunks/dep-1bdbec90.js
// 第 68134 行
async function createServer$2(inlineConfig = {}) {
  // ...
  const server = {
    // ...
    transformWithEsbuild, // 第 68168 行
    // ...
  };
}

// 第26715 行
async function transformWithEsbuild(code, filename, options, inMap) {
  const service = await ensureService();
  try {
    // ...
    const result = await service.transform(code, resolvedOptions); // 第 26735 行
    // ...
  } catch {
    // ...
  }
}

// 第 26702 行
async function ensureService() {
    if (!_servicePromise) {
        _servicePromise = require('esbuild').startService();
    }
    return _servicePromise;
}
 

启动命令vite serve时的调用顺序，最后会进入esbuild的startService的方法。 u1s1速度快，开发者能感觉到，但用户不理解。因此，无论你在开发过程中启动得有多快，如果包尺寸很大，那就没有意义了。所以，我们现在的发展目标是“小而快”！

对于代码压缩配置，官方文档解释：

- build.minify
	- Type: boolean | 'terser' | 'esbuild'
	- Default: 'terser'
	- Set to false to disable minification, or specify the minifier to use. The default is Terser which is slower 		but produces smaller bundles in most cases. Esbuild minification is significantly faster, but will result in 		 slightly larger bundles.
 

// vite/dist/node/chunks/dep-1bdbec90.js
// 第 46730 行
var build$1 = {
	// ...
	build: build, // 第 46734 行
};

// 第 46446 行
async function build(inlineConfig = {}) {
		// ...
    try {
        return await doBuild(inlineConfig); // 第 46449 行
    }
    finally {
        // ...
    }
}

// 第 46459 行
async function doBuild(inlineConfig = {}) {
  // ...
  const rollup = require('rollup'); // 第 46501 行
  try {
        const bundle = await rollup.rollup({
            // ...
        });
  }
  catch {
    // ...
  }
}
 

以上是执行vite build时的调用顺序。最后会到rollup进行打包。同时，SSR也采用方法doBuild进行封装。处理完毕，有兴趣的读者可以阅读Vite自己的源代码（某些行号已被贴心标记）。

添加砖块Java添加砖块？

根据上述命令创建的项目仅支持Vue和TS。如果我们需要支持其他功能，就得自己管理，下面会详细说明。

路由器

使用了Vue 3 Composition API，所以对应的用法是Vue Router 4+：♸

yarn add vue-router@4
 

使用动态引入实现延迟加载：

export const routes = [
  { path: '/', component: () => import('@/pages/home/home.vue') },
	// ...
  // other pages
  {	// 404 page
    path: '/:pathMatch(.*)*',
    component: () => import('@/pages/not-found/not-found.vue'),
  },
];
 

的使用也与Vue 2+略有不同：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from './routes';
import App from './app.vue';

const app = createApp(App);
const router = createRouter({
  history: createWebHistory(),
  routes,
});

app.use(router);
app.mount('#app');
 

CSS 预处理器

一般来说，项目现在将使用 Less 或 Scss，而不是直接使用 CSS。如果要使用预处理语言，请直接安装相应的预处理语言。就靠它了，所以我就不详细说了。而且使用的时候也和平常没有什么不同：

<style lang="less">
	/* Your less code */
</style>
 

但有时我们可以定义一些全局使用的变量或者mixin。这时候我们经常会使用类似于additionalData的less-loader在每个样式文件的头部引入对应的全局文件，这样就不需要在每个文件中都写@import "@/styles/mixins.less"语句了。使用Vite的操作其实是一样的：

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData:
          '@import "@/styles/variables";\n@import "@/styles/mixins";\n',
      },
    },
  },
});
 

使用css.preprocessorOptions.less.additionalData获取，无需安装某些软件包需要安装不同的loader♽♽，简单~

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
      dayjs: 'dayjs/esm',
    },
  },
});
 

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
	}
}
 

export default defineConfig({
  base: '静态资源 URL',
  server: {
    proxy: {
      '/api': {
        target: '请求 URL',
        changeOrigin: true,
      },
    },
  },
})
 

{
  scripts: {
    "start": "NODE_ENV=development vite"
  }
}
 

import Icon from '@/assets/icon.svg?raw';
 

Vue 3 绝对是一件大事。我们无法直接通过tsc进行类型检查，但是我们可以使用VSCoder插件Volar 在开发过程中完成类型检查。

在开发过程中，插件会突出显示类型错误，还可以运行verifyAllScripts来检查所有文件的类型。于是我想：如果我们直接在命令行中运行命令verifyAllScripts，是不是就可以得到tsc的效果了呢？

现实很残酷，但作者表示正在开发相关工具。说起来，作者效率很高啊！ 3月2日早上和作者沟通的时候，这个工具还在开发中，睡了一觉就发布了！一旦安装到您的项目中，只需运行 vue-tsc 即可实施类型检查！配置为husky或lint-staged，太好吃了！

完

总体来说，Vite还是可以满足开发需求的，开发体验还是不错的。它不需要大量的配置和脚本，如Webpack/Rollup等。事实上它不在盒子里。与之前使用的包裹相比，速度更快。有兴趣的开发者还是可以尝试一下，但如果用在正式的生产项目中，就要慎重考虑了！毕竟新人们还是要通过时间考验才能接手的~