用 vite 2 平滑升级 vue 2 + webpack 项目实战
目录
Vite vs. Webpack
完整迁移实战
Vite vs. Webpack
指标对比
经过实际运行，在同一项目中、采用几乎相同的设置，结果如下：
开发环节区别
webpack:
先转译打包，然后启动 dev server
热更新时，把改动过模块的相关依赖模块全部编译一次
vite:
对于不会变动的第三方依赖，采用编译速度更快的go编写的esbuild预构建
对于 js/jsx/css 等源码，转译为原生 ES Module(ESM)
利用了现代浏览器支持 ESM，会自动向依赖的 Module 发出请求的特性
直接启动 dev server (不需要打包)，对请求的模块按需实时编译
热更新时，仅让浏览器重新请求改动过的模块
目前由 webpack 或 vite 做的这些架设本地服务、静态资源打包、动态更新的工作，起码追溯到十多年前陆续都有各种解决方案了
构建环节
考虑到加载和缓存等，在生产环境中发布未打包的 ESM 仍然效率低下
vite 利用成熟的 Rollup，完成 tree-shaking、懒加载和 chunk 分割等
源码浅析
运行 vite 命令后：
-> start() // packages/vite/bin/vite.js
-> 利用 cac 工具构建可以处理 dev/build/preview 等命令的 cli 实例
-> cli.parse() // packages/vite/src/node/cli.ts
复制代码
- vite (dev 模式)
-> createServer() // packages/vite/src/node/server/index.ts
- resolveHttpServer() // 基于 http 原生模块创建服务
- createWebSocketServer() // 用 WebSocket 发送类似下面这样的热更新消息
- chokidar.watch(path.resolve(root), ...) // 监听源码变化
-> handleHMRUpdate() // 处理热更新 packages/vite/src/node/server/hmr.ts
- updateModules()
``````
ws.send({
type: 'update',
updates
})
[浏览器中 ws://localhost:8080/my-report/]
{
"type": "update",
"updates": [
{
"type": "js-update",
"timestamp": 1646797458716,
"path": "/src/app.vue",
"acceptedPath": "/src/app.vue?vue&type=template&lang.js"
}
]
}
``````
复制代码
浏览器中响应 hmr 的部分：
-> handleMessage() // packages/vite/src/client/client.ts
``````
if (update.type === 'js-update') {
queueUpdate(fetchUpdate(update))
} else {
``````
-> fetchUpdate()
``````
// 利用了浏览器的动态引入 https://github.com/tc39/proposal-dynamic-import
// 可见请求如 http://.../src/app.vue?import&t=1646797458716&vue&type=template&lang.js
const newMod = await import(
/* @vite-ignore */
base +
path.slice(1) +
`?import&t=${timestamp}${query ? `&${query}` : ''}`
)
``````
复制代码
- vite build
-> build() // packages/vite/src/node/cli.ts
-> doBuild() // packages/vite/src/node/build.ts
- resolveConfig() // 处理 vite.config.js 和 cli 参数等配置
- prepareOutDir() // 清空打包目录等
- rollup.rollup()['write']() // 用 rollup 完成实际打包和写入工作
复制代码
迁移实践
业务背景和迁移原则
迁移背景：
现有项目的 webpack 开发调试和打包速度已经较慢
查看后台统计数据，项目的浏览器覆盖情况可以支持抛掉历史包袱
项目具有代表性，已经包含了 TS/JSX/FC 等写法的组件和模块
需要渐进迈向 vue3 技术栈
升级原则：
对原有开发打包流程无痛、交付产出物结构基本不变
保证线上产品安全，设置观察期并 兼容 webpack 流程 而非直接替换
覆盖后台访问记录中的主流浏览器并周知测试产品等研发环节
主要涉及文件：
/index.html – 新的入口，原有 src/index.html 暂时保留
/vite.config.js – vite 工具的配置文件
vite版本：
vite v2.8.2
node 版本:
node v14.19.0
实践表明 v14 可以兼顾新的 vite 和既有 webpack 两套流程
如果涉及 jenkins 等部署环节，可能需要关心相关 node 软件包的升级
package.json
依赖
"devDependencies": {
"vite": "^2.8.2",
"vite-plugin-vue2": "^1.9.3",
"vite-plugin-html": "^3.0.4",
"vite-plugin-time-reporter": "^1.0.0",
"sass": "^1.49.7",
"rollup-plugin-copy": "^3.4.0",
"@vue/compiler-sfc": "^3.2.31",
},
复制代码
npm scripts
"debug": "vite --mode dev",
"build": "vite build --mode production",
"preview": "vite preview --port 8082",
复制代码
之前的 webpack 命令加前缀（如：“webpack:build”），继续可用
node-sass
升级版本，同时满足了 webpack/vite 的打包要求
- "node-sass": "^4.9.2",
+ "node-sass": "^6.0.0",
- "sass-loader": "^7.0.3",
+ "sass-loader": "^10.0.0"
复制代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" href="/src/assets/imgs/report.ico" />
<link rel="stylesheet" href="<%- htmlWebpackPlugin.options.navCss %>" />
<title><%- htmlWebpackPlugin.options.title %></title>
<script
type="text/javascript"
src="<%- htmlWebpackPlugin.options.navJs %>"
></script>
</head>
<body>
<div id="nav"></div>
<div id="app"></div>
<script type="module" src="/src/index.js"></script>
</body>
</html>
复制代码
位于根目录，vite 默认的入口
加入 type=“module” 的入口文件 script 元素
<%= => 语法变为 <%- ->
基础配置
复用并完善了之前的打包和开发配置文件：
// build/config.js
module.exports = {
title: '报表',
// 打包文件夹名称
base: 'my-report',
// 调试配置
debug: {
pubDir: 'dist',
assetsDir: 'assets',
host: 'localhost',
port: 8080,
navCss: '/src/assets/common2.0/scss/nav-common.css',
navJs: '/src/assets/common2.0/js/nav-common.js',
proxy: {
target: 'http://api.foo.com'
}
},
// 生产配置
prod: {
navJs: '/public/v3/js/nav-common.js',
navCss: '/public/v3/css/nav-common.css',
}
};
复制代码
vite.config.js 基本结构
import {createVuePlugin} from 'vite-plugin-vue2';
export default ({mode}) => {
const isProduction = mode === 'production';
return defineConfig({
base: `/${config.base}/`,
logLevel: 'info',
// 插件，兼容 rollup
plugins: [
// vue2 和 jsx
createVuePlugin({
jsx: true,
jsxOptions: {
compositionAPI: true
}
}),
// 打包统计
timeReporter()
],
// devServer 设置
server: {},
// 依赖解析规则等
resolve: {
alias: {}
},
// 打包目录、素材目录、rollup原生选项等
build: {}
});
};
复制代码
resolve 的迁移
之前 webpack 中的配置：
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.js', '.jsx', '.json', '.css', '.scss'],
alias: {
'@': path.resolve(__dirname, '../src'),
assets: path.resolve(__dirname, '../src/assets'),
vue$: path.resolve(__dirname, '../node_modules', 'vue/dist/vue.esm.js')
},
symlinks: false
},
复制代码
vite 中的写法：
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.js', '.jsx', '.json', '.css', '.scss'],
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
},
{
find: 'assets',
replacement: path.resolve(__dirname, 'src', 'assets')
},
{
find: 'vue$',
replacement: path.resolve(__dirname, 'node_modules', 'vue/dist/vue.esm.js')
},
{
find: '~@foo/src/styles/common/publicVar',
replacement: 'node_modules/@foo/src/styles/common/_publicVar.scss'
},
{
find: '~@foo/src/styles/mixins/all',
replacement: 'node_modules/@foo/src/styles/mixins/_all.scss'
}
]
},
复制代码
以上最后两项配置属于之前引用的错误路径，vite 无法跳过，并将引起打包失败；需要修正引用或在此特殊处理
build 的迁移
之前 webpack 中的配置：
context: path.resolve(__dirname, '../'),
mode: isProduction ? 'production' : 'development',
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, '../dist', config.base),
publicPath,
filename: isProduction ? 'assets/js/[name].[contenthash:8].js' : 'assets/js/[name].[hash:8].js',
chunkFilename: isProduction
? 'assets/js/[name].[contenthash:8].chunk.js'
: 'assets/js/[name].[hash:8].chunk.js'
},
performance: {
maxEntrypointSize: 2000000,
maxAssetSize: 1000000
}
复制代码
vite 中的写法：
build: {
outDir: `${pubDir}/${config.base}`,
assetsDir,
rollupOptions: {
},
chunkSizeWarningLimit: 1000000,
cssCodeSplit: true
}
复制代码
直接拷贝的素材
业务中有一部分动态路径的素材图引用 ，path 可能为 assets/imgs/noData.png 这样的相对路径
webpack 中用 ‘copy-webpack-plugin’ 插件拷贝图片到发布目录下，调试过程中是可以访问到的
vite 用拷贝插件 ‘rollup-plugin-copy’ 同样可以拷贝成功，但调试进程中访问不了 dist 目录
import copy from 'rollup-plugin-copy';
...
// 打包时才拷贝
plugins: [
isProduction
? copy({
targets: [
{
src: path.resolve(__dirname, 'src/assets/imgs'),
dest: `${pubDir}/${config.base}/${assetsDir}`
}
],
hook: 'writeBundle'
})
: void 0,
],
// 调试过程中特殊转写
server: {
proxy: {
'/my-report/assets/imgs/': {
target: `http://${host}:${port}/`,
rewrite: path => path.replace('assets', 'src/assets')
}
},
}
复制代码
特殊的外部引用
vite 需要用 ‘vite-plugin-html’ 插件来达成和兼容与 ‘html-webpack-plugin’ 一样的 html 注入效果
形如 ‘/public/v3/css/nav-common.css’ 这样的特殊引用，不符合 vite 内部的保留策略，会被删除原 标签并转换成 js import，这将造成页面无法正常访问
结合自定义插件实现打包过程中的 hack 和打包结束后的恢复
import {createHtmlPlugin} from 'vite-plugin-html';
...
const indexReplaceHolder = '//fakePrefix';
...
plugins: [
createHtmlPlugin({
template: 'index.html',
minify: true,
inject: {
data: {
htmlWebpackPlugin: {
options: {
title: config.title,
navCss: isProduction ? indexReplaceHolder + config.prod.navCss : config.debug.navCss,
navJs: isProduction ? indexReplaceHolder + config.prod.navJs : config.debug.navJs
}
}
}
}
}),
(function() {
let viteConfig;
return {
name: 'vite-plugin-fix-index',
configResolved(resolvedConfig) {
viteConfig = resolvedConfig;
},
transformIndexHtml(code) {
if (viteConfig.command === 'build' && isProduction) {
const re = new RegExp(indexReplaceHolder, 'g');
code = code.replace(re, '');
}
return code;
}
};
})(),
],
复制代码
传统浏览器兼容
vite 用 @vitejs/plugin-legacy 插件为打包后的文件提供传统浏览器兼容性支持
legacy 对 build 速度影响较大，酌情采用
plugins: [
legacy({
targets: ['> 1%', 'last 2 versions', 'not ie <= 10']
}),
]
复制代码
legecy后全局 css 失效
vue 2 中，build.cssCodeSplit: false 加上 legecy 将导致全局样式丢失等问题(gitee.com/ZhongBangKeJi)
环境变量
process.env 的写法在 vite 中改为了 import.meta，并且使用上有差异
// src/utils/env.js
export const getEnvMode = () => {
try {
// eslint-disable-next-line
if (typeof process !== 'undefined' && process.env) {
// eslint-disable-next-line
return process.env.NODE_ENV;
}
// eslint-disable-next-line
if (import.meta && import.meta.env) {
return import.meta.env.MODE;
}
} catch (e) {
console.log(e);
}
};
复制代码
// package.json
"devDependencies": {
"@open-wc/webpack-import-meta-loader": "^0.4.7",
}
复制代码
// webpack -> module -> rules
{
test: /\.jsx?$/,
-loader: 'babel-loader',
+loaders: ['babel-loader', {loader: require.resolve('@open-wc/webpack-import-meta-loader')}],
include: [path.resolve(__dirname, '../src')]
}
复制代码
// jest.config.js -> collectCoverageFrom
[
'!/src/utils/env.js'
]
复制代码
// __tests__/setup.js
jest.mock('../src/utils/env.js', () => {
return {
getEnvMode: () => 'production'
};
});
复制代码
require.ensure
暂时没有很好的兼容写法，应尽量避免
new Set()
如果使用了 Map/Set 等 ES6 的类型且没有使用 polyfill，应该注意其行为
比如 Set 的值可能在 webpack/babel 的转写中会自动变为数组，而新的流程中需要手动用 Array.from() 处理
总结
webpack 工作流基本可以被 vite 完整复刻，适应线上平滑升级
基于浏览器访问记录评估，大部分项目可以享受 vite 极速打包福利
对于需要兼容 IE 11 等特殊情况的，需要充分测试后，考虑用 legecy 模式迁移
需要注意生产环境rollup打包与开发环境的代码会不一致，最好用 preview 验证
最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 ！
PHP学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com