【前端基建】如何将vue2项目构建从webpack迁移至vite及vite优缺点

众所周知使用webpack构建项目的时候，他会将所有的代码及依赖包进行编译，然后打包成一个体积较大bundle js文件，所以在项目冷启动的时候需要较长的时间，在启动后修改代码的时候，有一块改动也会使得整个文件更新，导致在热更新阶段页面刷新不及时，随着项目的不断增大，这样的现象会更加明显。

那么随着时代的进步，浏览器能力和性能不断的增加，esm的出现，可以让模块化的依赖关系可以在浏览器端直接被解析，而不在需要webpack将这些依赖包预编译为浏览器可识别的AST语法。esbuild预编译只项目中需要的依赖包通过编译type=module的标签，而不在时将依赖包一并编译打包在bundle中，加上esbuild使用go编写，编译速度也是javascript的很多倍，这样在预编译阶段速度大大提高

迁移前注意事项：

vite只作为静态文件服务器，不会像webpack那样什么都帮我们做好，有些问题还需要开发手动解决

不支持node api ，比如在页面中通过环境变量区分环境process.env 在vite编译时不在支持，可以在vite.config.js 中定义，define中定义options不支持commonjs，不支持项目中使用require的方式引入的文件 如：const fs = require(‘fs’)对.vue文件中使用jsx语法书写的组件支持不很友好，需要在script标签中添加lang=jsx去兼容，或者通过第三方插件进行处理如果项目很大或自定义事项较多，生产环境build 可继续使用原始集成的webpack进行构建，开发环境使用vite，增加开发效率 安装vite

npm install vite --save-dev

安装基础插件

npm install vite-plugin-vue2 unplugin-auto-import/vite  --save-dev

入口文件修改

使用vite构建开发环境时启动服务的根目录为当前文件所在的位置，所以index.html文件只能在根目录，如果没有在根目录，如：/pulice/index.html

|-- src
	|-- main.js
	|-- components
		|-- ...
	|-- ...
|-- index.html
|-- vite.config.js

同时index.html中需要指定入口js文件

增加配置文件

// vite.config.js
const path = require('path');
import { defineConfig } from 'vite';
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'; // 重要插件
import styleImport, { VantResolve } from 'vite-plugin-style-import'; // vant提供的按需加载插件
import AutoImport from 'unplugin-auto-import/vite';
function resolve (dir) {
    return path.join(__dirname, dir);
}
export default defineConfig({
    plugins: [
        Vue2(),
        AutoImport({
            imports: [
                'vue-router', // 导入路由模块
            ],
            dts: './src/auto-imports.d.ts', // 引入后会自动创建该文件
        }),
        styleImport({
            resolves: [VantResolve()], // 这里时以vant为例，将vant组件按需加载
        }),
    ],
    resolve: {
        alias: {
            '@': resolve('src'), // 别名可继续使用vue.config.js中的配置
        },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], //导入时想要省略的扩展名列表。
      //官方不建议将 .vue 扩展名添加到列表中，但是如果原始项目中很多文件没写扩展名，在这就添加一下，否则找不到vue文件模块
    },
    server: {...}, // 可继续使用vue.config.js中的配置
});

增加启动脚本

...
  scripts:{
    "start": "vite",
    ...
  }
...

到这基本的迁移工作就完成了，这里只介绍了使用vite部署开发环境，如果项目比较大，生产环境可继续使用webpack进行构建。

通过使用

优点： 开发环境启动服务更快，使用esbuild只做预编译然后启动服务，不做依赖打包热更新更加迅速，只更新发生了改动的单个模块内存占用更小，不做依赖打包，每个模块使用的时候通过http/2进行网络请求 缺点： 页面路由加载慢，每次需要请求当前页面的依赖包浏览器性能消耗增加，获取到以来及页面文档后需要在浏览器端进行解析当下生态不够完善，想做一些比较偏门的 *** 作无法实现，比如在页面中使用process.env获取环境变量 vite核心思想 基于浏览器的进步，浏览器对原生esm 的支持能够直接支持type=module模块解析使用go编写的ESbuild，相比使用javascript编写的webpack 预编译速度更快每个页面的模块独立，更新也不再更新所有模块相比webpack不在将所有的依赖模块都预编译为一个bundle放入内存中，预编译完以后，会将每个模块作为一个type=module的js文件使用http/2进行网络请求

这样带来的缺点及时每次切换路由的时候就会加载当前页面依赖的所有模块，然后在浏览器端进行解析，从而增加了对浏览器性能的消耗

优点就是开发时热更新只需要更新单个模块的js文件
参考链接:https://dlsjf.top/Home/Blog/Article?id=2981