vite-初识

官方中文文档：https://cn.vitejs.dev/

一、什么是vite

vite（发音：/vit/）是一种新型前端构建工具，能够显著提供前端开发体验。

vite 主要由两部分组成：

1. 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能。
2. 一套构建指令，它使用 Rollup 打包代码（预配置），可输出用于生产环境的高度优化过的静态资源。

二、Vite 优势

1. 极速的服务启动

使用原生 ESM 文件，无需打包

ESM——ES6提出的标准模块化系统
1. 很多浏览器开始支持
2. 拥有类似commondjs的写法和同步异步加载机制
3. 能通过设置type = module，用于html中
4. node也开始支持

2. 轻量快速的热重载（HMR）

HMR——hot module replacement 

3. 丰富的功能

对ts、jsx、css等支持开箱即用

4. 优化的构建

可选“多页应用”或“库”模式的与配置 Rollup 构建

5. 通用的插件

在开发和构建中共享rollup=superset插件接口库

6. 完全类型化的API

灵活的API和完整 TypeScript 类型

三、与其他打包方式对比

（1）服务器启动

1. 当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。
2. Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

（2）更新

1. 基于打包器启动时，重建整个包的效率很低。原因显而易见：因为这样更新速度会随着应用体积增长而直线下降。
2. 在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活，使得无论应用大小如何，HMR 始终能保持快速更新。
3. Vite 同时利用 HTTP 头来加速整个页面的重新加载：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

四、项目中使用vite

注意：Node.js 版本>= 12.0.0

1. 使用npm

npm init vite@latest

2. 使用yarn

yarn create vite

3. 支持的模板预设

可以从中选择合适的模板

• vue
• vue-ts
• react
• react-ts
• ……

4. 目录结构

5. vite.config.js 配置

import vue from '@vitejs/plugin-vue';
import path from 'path';
import styleImport from 'vite-plugin-style-import';

export default ({command, mode}) => {
    console.log('mode:', mode);
    return {
        // 插件
        plugins: [
            vue(),
            // 使用vant
            styleImport({
                libs: [
                    {
                        libraryName: 'vant',
                        esModule: true,
                        resolveStyle: (name) => `vant/es/${name}/style`
                    }
                ]
            })
        ],
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src') // 路径别名设置
            }
        },
        base: mode === 'prod' ? 'xxx' : '/', // 基础路径 根据环境配置不同的路径 可以配置cdn
        server: {
            host: '0.0.0.0', // 设置为本地网路
            open: true,
            proxy: {
                // 代理-解决本地跨域问题
                '/proxy': {
                    target: 'xxx', // 配置api测服域名
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/proxy/, '')
                }
            }
        },
        build: {
            sourcemap: mode === 'prod' ? false : true
        }
    };
};