vite 相关实践 - 技术栈

正儿八经的用了vite+vue3+ts差不多一个月了，体验感很好，基本会用vue2+webpack的可以快速上手，非常方便，暂时做个记录。

vite和webpack比较

vite突出的就是快速，本地开发秒开，体验感非常好，vite开发环境依赖esbuild进行预构建，生产环境则依赖rollup进行打包，并且充分利用了现代浏览器的特性，比如http2、ES module，vite是站在众多巨人肩膀上的一个产物，类似webpack + webpack-dev-server的结合体，是一个非常棒的前端项目的构建工具。

在<script type="module">中，浏览器遇到内部的import引用时，会自动发起http请求，去加载对应的模块。

vite也正是利用了ES module这个特性，使用vite运行项目时，首先会用esbuild进行预构建，将所有模块转换为es module，不需要对我们整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。

这样一来，首次启动项目（冷启动）时，自然也就比webpack快很多了，并且项目大小对vite启动速度的影响也很小。

本地开发时，vite会直接请求vue文件，而不是经过打包之后的js文件

生产打包时，利用rollup打包，在vite.config.js中可以对build.rollupOptions打包进行优化

webpack打包为万物皆可打包，从配置文件入口，利用导入导出方法做配合，成为一个大bundle.

vite配置

vite有很多优化点都进行了内置，记录下目前用到的几个点： vite中经常需要和环境变量env打交道，简要记录下

json 复制代码

.env 默认加载
.env.development 开发环境
.env.production 生产环境
.env.test 自定义测试环境

// package.json

"scripts": {
  "dev": "vite", //默认对应development
  "build": "vite build", //默认对应production
  "build:test": "vite build --mode=test",
},

javascript 复制代码

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd())
    const { VITE_APP_BASEURL,VITE_APP_OUTDIR } = env
    return {
        base: VITE_APP_BASEURL, // 开发或生产环境服务的公共基础路径
        plugins: [],
        resolve: {},
        css: {},
        build: {},
        server: { },
    }
})

1.将打包的index文件进行拆分，第三方包拆分出来

javascript 复制代码

// vite.config.js

const dependencies = require('./package.json').dependencies;

build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            //生产环境时移除console
            drop_console: true,
            drop_debugger: true,
        },
    },
    rollupOptions: {
        treeshake: true, // 开启 Tree Shaking，消除未使用的代码，减小最终的包大小
        output: {
            // 根据不同的js库 拆分包，减少index.js包体积
            manualChunks(id) {
                if (id.includes('node_modules')) {
                    // 指定需要拆分的第三方库或模块
                    const dependenciesKeys = Object.keys(dependencies);
                    const match = dependenciesKeys.find((item) => {
                        return id.includes(item);
                    });
                    const notSplit = ['vue', 'ant-design-vue'];
                    if (match && !notSplit.includes(match)) {
                        return match;
                    }
                }
            },
        },
        commonjsOptions: {
            requireReturnsDefault: 'namespace', // 要求ES模块返回其名称空
        }
    },
    outDir: VITE_APP_OUTDIR,
},

2.复制一份public中的html文件，向其中注入变量

php 复制代码

// vite.config.js

import { createHtmlPlugin } from "vite-plugin-html";

plugins: [
    createHtmlPlugin({
        minify: false, // 是否压缩文件 默认true
        inject: {
            data: {
                path: VITE_APP_BASEURL // 注入变量pah
            },
        },
    })
  
],

xml 复制代码

// html文件

<script>
    document.write(
       '<script type="text/javascript" charset="utf-8" src="<%- path %>config.js?v=' +
          new Date().getTime() +
          '"></script>'
    )


</script>