vite总结

原创已于 2022-09-14 17:42:54 修改 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #webpack

于 2022-09-04 00:57:10 首次发布

vite这玩意相对于webpack来讲确实是打包速度更快，但是生态还没有webpack成熟，但是未来应该是有发展潜力的，所以这里来记录一下vite的相关知识。

官网：为什么选 Vite {#why-vite} | Vite中文网

一. vite和webpack的区别

为什么使用vite，其实最主要的原因就是打包速度更快。其原理是按需打包。

webpack支持多种导入格式，import和require，在开始编译之前会将他们都读一遍统一化为webpakc_require()。

而vite只支持es6的import，从而支持按需打包。

一个兼容性更强，一个更加快捷。

下图为区别示意。

二. 初体验

yarn init

yarn add vite -D

安装之后为了方便在json中配置script。

{
  "name": "vite",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev":"vite"
  },
  "devDependencies": {
    "vite": "^3.0.9"
  }
}

三. vite预编译

vite在dev环境打包会将需要的模块预编译，例如将common.js转换为es6.

在pro环境打包，会全权交给rollup。

为了防止网络多包的情况，vite还会把多包引用集成到一个js中。

四. vite 配置

1.基本配置

目录结构：

vite.config.js

这里使用defineConfig 是为了获得语法提示，内部是做了ts。

这里主要是涉及到了环境变量的使用。

import { defineConfig, loadEnv } from "vite"
import viteBaseConfig from "./vite/vite.base.config"
import viteDevConfig from "./vite/vite.dev.config"
import viteProdConfig from "./vite/vite.prod.config"
//策略模式
const envResolver = {
    "build": () => ({ ...viteBaseConfig, ...viteDevConfig }),
    "serve": () => ({ ...viteBaseConfig, ...viteProdConfig })
}
//commond根据我们的指令会变成对应的值
export default defineConfig(({ command,mode }) => {
    //cwd用于返回node的工作进程 第三个参数默认值为.env 肯定解析
    //mode 为development 或 production
    //当mode为 xxx时会读取env.[xxx]进行解析，并且合并原来的env
    //vite会将环境变量注入到import.meta.eny中 这里我在index.js中打印
    //但是vite会先做一层拦截 防止隐私变量被直接注入，不是以vite开头就不会被直接注入
    //想要更改前缀可以在envPrefix配置
    const env=loadEnv(mode,process.cwd(),"")
    console.log(env,"@@@");
    return envResolver[command]()
})

修改前缀实例：在vite.base.config.js

import {defineConfig} from "vite"
export default defineConfig({
    optimizeDeps:{
        exclude:[]
    }
})

2. vite原理

实现简单的vite开发服务器

略

3. vite对css以及css模块化的处理

vite天生支持对css的处理。

原理就是vite读取入口文件时，会读到引用的css，将其添加到html的style标签里。

使用css模块化处理css样式冲突。

使用方法

import add from "./count";
import "./style/base.css";
import demo1 from "./style/demo1.module.css"
console.log("index");
console.log(add(1, 3, 6, 2));
console.log(demo1);
let demo=document.createElement("div")
demo.className=demo1.demo1
document.body.appendChild(demo)

效果

原理就是，凡是module.css，再塞到style里之前，将类名使用类名+hash替换，同时创建一个映射对象。

当使用less或者scss等使用的css预处理时。同样支持上面的模块化。

以less为例，安装less预处理。

yarn add less

后面操作一致。

css配置流程

import { defineConfig } from "vite"
export default defineConfig({
    optimizeDeps: {
        exclude: []
    },
    css: {
        //最终丢给postcss
        modules: {
            //用来配置css模块化映射对象是驼峰还是横线
            localsConvention: "camelCase",
            //配置module.css是模块还是全局 默认就是我们一开始的local
            //设置全局的化就不会加hash值
            scopeBehaviour: "local",
            //生成类名格式 下面是示例 也可以使用函数的形式自定义
            generateScopedName: "[name]_[local]_[hash:5]",
            //hash前缀
            // hashPrefix:"Ts",
            //不想参与模块化的路径 纯没用
            globalModulePaths:[]
        }
    }
})

配置css预处理器的全局参数和sourcemap

import { defineConfig } from "vite"
export default defineConfig({
    optimizeDeps: {
        exclude: []
    },
    css: {
        //最终丢给postcss
        modules: {
            //用来配置css模块化映射对象是驼峰还是横线
            localsConvention: "camelCase",
            //配置module.css是模块还是全局 默认就是我们一开始的local
            //设置全局的化就不会加hash值
            scopeBehaviour: "local",
            //生成类名格式 下面是示例 也可以使用函数的形式自定义
            generateScopedName: "[name]_[local]_[hash:5]",
            //hash前缀
            // hashPrefix:"Ts",
            //不想参与模块化的路径 纯没用
            globalModulePaths: []
        },
        //预处理器
        preprocessorOptions: {
            less: {
                math:"always",
                globalVars:{
                    //全局变量
                    mainColor:"pink"
                }
            },
            scss: {},
        },
        //css 的 sourcemap
        devSourcemap:true
    }
})

vite使用postcss

安装postcss预环境

npm i postcss-preset-env -D

在vite中使用

      postcss: {
            plugins: [postcssPresetEnv()]
        },

例子

编译前

.demo1{
    /* 设置宽度为30% 最小不小于100px 最大不大于200px */
    width: clamp(100px,30%,200px);
    height: 100px;
    background-color: red;
    user-select: none;
}

编译后效果

4. vite对静态资源的处理

路径别名

    resolve: {
        //路径别名
        alias: {
            "@": path.resolve(__dirname)
        }
    },

vite在生产环境对静态资源的处理。

配置rollup构建策略

    build: {
        rollupOptions: {
            //配置rollup打包构建策略
            output: {
                //控制输出
                assetFileNames: "[hash].[name].[ext]"
            },
        },
        assetsInlineLimit: 4096000, //4000kb小于都打包为base64 大于就是静态
        // outDir: "", //输出目录
        assetsDir: "static", //静态资源目录
    }

5. vite插件使用

（1）自动别名插件

GitHub - Subwaytime/vite-aliases: Alias auto generation for Vite

生成例子

使用就完全按照文档就好。

（2）动态修改html title

其实合webpack-html-plugin功能一样，但是大部分vite内部已经配置好了比如设置template。

https://github.com/vbenjs/vite-plugin-html

yarn add vite-plugin-html -D

使用也是对应文档即可。

（3）vite-plugin-mock

模拟数据

我用不上就不装了

（4）总结

插件使用

之前使用的插件

    plugins: [
        ViteAliases(),
        createHtmlPlugin({
            inject: {
                data: {
                    title: "666"
                }
            }
        })
    ],

plugin本身是附带很多api的

vite和vue差不多也有插件中的生命周期钩子。

6. vite和ts

vite对于ts天生支持。

让ts错误展示在控制台

用来阻塞开发

使用 vite-plugin-checker

Getting Started | vite-plugin-checker

注意这个插件依赖于ts 所以要按照ts

npm i typescript

创建tsconfig.json

效果

不管是打包还是开发过程都会直接语法报错，阻塞过程。

使用三斜线指令进行环境变量提示

/// <reference types="vite/client" />
interface ImportMetaEnv {
    readonly VITE_URL: string
}

这样就可以在其他地方的import.meta.env处出现属性提示。（在ts文件有效）

在ts里使用第三方包按模块引入可能会没有提示，这个就是按上面警告按照对应的ts类型提示就行。

7. vite性能优化

（1）开发方面的构建速度优化。

分包策略

分包是为了将不会经常变动的代码进行单独打包，为了防止浏览器不读缓存频繁请求。

例如我们不希望多次读取node_modules的文件

  build: {
        rollupOptions: {
            //配置rollup打包构建策略
            output: {
                //控制输出
                assetFileNames: "[hash].[name].[ext]",
                //配置分包
                manualChunks:(id)=>{
                    if(id.includes("node_modules")){
                        return "vendor"
                    }
                }
            },
        },
        assetsInlineLimit: 4096000, //4000kb小于都打包为base64 大于就是静态
        // outDir: "", //输出目录
        assetsDir: "static", //静态资源目录
        emptyOutDir: true, //清除输出目录
        minify:false,//是否压缩代码
    }

那么最后生成的文件就会是这样

（2）页面性能指标 fcp首屏渲染时间 lcp最大元素时长。