webpack項目中使用vite加速的兼容模式詳解
前言
隨著公司前端工程越來越大，啟動是無盡的等待，修改是焦急的等待。
vite 到現在生態也起來瞭，就有瞭把項目改造成 vite 的想法，但是項目後面可能要依賴 qiankun 改造成微前端項目，現在 qiankun 對 vite 還沒有好的解決方法，我就想采取一個折中的辦法，保留 webpack，再兼容 vite，兩條路都留著。
目的
- 可以用 vite 跑開發環境。
- 可以用 webpack 跑開發環境。
- 暫時用 webpack 打包，等後面有解決方案再全面轉 vite。
要處理的問題
要走的是兼容模式，原來項目的代碼能不動的盡量不動。
- 共用 index.html（使用一個 index.html）。
- 共用配置（讓 webpack 和 vite 共用一些配置，減少每次配置都要兩邊看的情況）。
- 兼容環境變量（環境變量 vite 是 import.meta.env，webpack 是 process.env，不修改原來的 process.env 寫法還兼容 vite）。
- 自動導入（自動導入在 webpack 裡面用 require.context，vite 裡面無法使用）。
- 資源引入（原來使用 require 方式引入圖片資源的需要改動，"~xxx/dist/xxx.css" 以 ~ 開頭引入資源的方式兼容處理）。
- svg-sprite-loader 替代方案。
動手
共用 index.html
vite 中 index.html 是在根目錄放的，webpack 在 public 下面放的，我們把 index.html 放到外面。
下面是咱們 webpack 的開發模式和生產模式。
"dev": "vue-cli-service serve", "build": "vue-cli-service build",
我們可以利用 npm hook 做一點事情，這樣每次在 dev，build 這兩個命令運行之前我們都可以先執行自己的腳本。
"predev": "node ./command/html.js", "prebuild": "node ./command/html.js", "dev": "vue-cli-service serve", "build": "vue-cli-service build",
// ./command/html.js
const path = require('path')
const fs = require('fs')
// 把 index.html 拷貝到 public 下
fs.copyFileSync(path.resolve('./index.html'), path.resolve('./public/index.html'))
vite 中的 index.html 需要一個這樣的標簽來指定入口文件，但是我們在 webpack 中不需要，我們可以借助插件來處理。
<script type="module" src="...">
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig(({ mode }) => {
// 加載環境變量，因為 vite 中不會加載以 VUE 開頭的，我們得自己指定下
const envPrefix = ['VUE']
const env = loadEnv(mode, process.cwd(), envPrefix)
return {
plugins: [
createHtmlPlugin({
minify: true,
template: './index.html',
entry: '/src/main.js', // 這個會幫我們註入入口 js 文件
inject: {
data: {
// 這是我們 index.html 用到的環境變量
...env
}
}
})
]
}
})
共用配置
例如我 webpack 中 devServer 和 vite 中的 server 配置就可以公用，但是 vite 使用的是 es module 引入，webpack 用的是 commonjs 規范，我們也可以用命令來處理。
// config/index.js
// server 配置文件
export default {
host: '0.0.0.0',
port: 12003,
https: false,
hotOnly: true,
disableHostCheck: true,
proxy: {
'/v1': {
target: 'xxx',
changeOrigin: true
}
}
}
// vite.config.js
import server from './config/index.js'
import { defineConfig } from 'vite'
export default defineConfig(({ mode }) => {
return {
server,
}
})
// vue.config.js
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
// babel 編譯過的 js包瞭一層
const devServer = require(resolve('config_cm')).default
module.exports = {
devServer
}
可以看到 vite 和 webpack 使用的 server 配置引入方式不一樣，因為模塊化規則不一樣，我們下面利用下 npm hook，每次打包前也會把我們 config 文件夾轉為 commonjs 規范，輸出到 config_cm 下。
"transformJs": "babel –plugins @babel/plugin-transform-modules-commonjs –presets=@vue/cli-plugin-babel/preset ./config -d ./config_cm",
"predev": "node ./command/html.js && npm run transformJs",
"prebuild": "node ./command/html.js && npm run transformJs",
兼容環境變量
我們項目中有很多 procsss.env.xxx 這種寫法，我們要想這種寫法在 vite 裡面也生效，就得利用 vite 裡面 define 這個配置，如下：
// vite.config.js
import server from './config/index.js'
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
const envPrefix = ['VUE']
const env = loadEnv(mode, process.cwd(), envPrefix)
const define = {
'process.env.NODE_ENV': '"development"',
'process.env.BASE_URL': '"/"',
'process.env.VITE': true
}
for (const [key, value] of Object.entries(env)) {
define[`process.env.${key}`] = `"${value}"`
}
return {
define,
}
})
自動導入
// vue.config.js
// 需要安裝 webpack-strip-block，作用是為瞭刪除某段代碼
module.exports = {
configureWebpack() {
return {
module: {
rules: [
{
test: /\.(js|scss)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'webpack-strip-block'
}
]
}
]
}
}
}
}
// VITE 變量是在 vite.config.js 配置的，webpack 中是不存在的
// develblock 開頭的註釋是因為 webpack 中不存在 import.meta.globEager，編譯會失敗，所以我們
// 需要對這種做特殊處理
if (process.env.VITE) {
/* develblock:start */
componentsContext = import.meta.globEager('./**/index.vue')
/* develblock:end */
} else {
componentsContext = require.context('./', true, /index\.vue$/)
}
// autoImport 是我們自己寫的共用方法，主要根據 process.env.VITE 判斷就可以實現兩種環境中的導入方式
const components = autoImport(componentsContext, 'component')
for (const c of components) {
Vue.component(c.name, c)
}
資源引入
require('./xx.png')
// 這樣 vite 和 webpack 中都可以使用
import xx from './xx.png'
在 webpack 打包中，我們樣式中可能會出現下面這種引入方式，引入某個包下面的文件，或者引入 @（src 的別名）下的資源文件。
@import "~@[包名稱]/dist/xx.css";
.xx {
background-image: url("~@/views/integration/assets/images/btn_icon/stop_hover.png");
}
修改一下
// 下面得寫兩行引入，因為為瞭兼容 webpack 和 vite。
/* develblock:start */
@import "@[包名稱]/dist/xx.css";
/* develblock:end */
@import "~@[包名稱]/dist/xx.css";
// 這個不用動
.xx {
background-image: url("~@/views/integration/assets/images/btn_icon/stop_hover.png");
}
我們這個時候得去 vite 配置下別名，可以根據自己需求靈活配置。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig(({ mode }) => {
resolve: {
alias: [
// 針對以 ~@/[包名稱]開頭的，替換為 node_modules/@[包名稱]
{ find: /^(~@)(?!\/)(.+)/, replacement: path.join('node_modules/@$2') },
// 針對以 ~@/ 開頭，替換為 src/
{ find: /^~@\//, replacement: path.join(__dirname, 'src/') },
// 針對以 @/ 開頭的，替換為 src/
{ find: /^@\//, replacement: path.join(__dirname, './src', '/') }
]
},
})
svg-sprite-loader 替代方案
在 webpack 中使用瞭 svg-sprite-loader，vite 中需要使用 vite-plugin-svg-icons
// 原來 webpack 下引入 svg 文件的 js
// 假設 svg 文件夾下存放瞭我所有的 svg 文件，這樣兩種環境下都可以使用
if (!process.env.VITE) {
const context = require.context('./svg', false, /\.svg$/)
context.keys().forEach(context)
}
// vite.config.js
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig(({ mode }) => {
createSvgIconsPlugin({
// 存放 svg 文件的文件夾
iconDirs: [path.resolve(process.cwd(), 'src/common/icons/svg')],
// 和 webpack 保持一致就行
symbolId: 'icon-[name]'
}),
})
其他
- 我項目中使用的是 Vue2，所以用的是 vite-plugin-vue2 這個插件，Vue3 也同理。
- 我之前調試的時候，根目錄和 public 下同時存在 index.html 的時候出現過一些緩存問題，所以利用 npm hook 在用 vite 啟動的時候把 public 下的 index.html 刪掉瞭，原理和上面使用的方法一樣。
- 我項目中使用的是 antd 1.x 的包，會因為 moment 導致錯誤，有一個 vite-plugin-antdv1-momentjs-resolver 可以解決，不用重復造輪子。
- 不升級為 Vue3 是覺得沒必要，項目中也使用瞭 @vue/composition-api 這個包，可以使用 Vue3 的 composition-api 寫法。
效果
左邊是 vite，右邊是 webpack，vite 命令啟動前我做瞭一些操作，所以 vite 啟動幾乎是秒開，而 webpack，是分鐘級別的。這還是在我的電腦上，公司機子更慢瞭去瞭。
在熱更新方面，webpack 大概幾秒鐘，vite 幾乎無感知。
vite 第一次啟動因為沒有緩存，進頁面稍微慢點，後面就感覺不到瞭。
以上就是webpack項目中使用vite加速的兼容模式詳解的詳細內容，更多關於webpack vite加速兼容模式的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- webpack cjs運行時分析示例詳解
- webpack模塊化的原理解析
- webpack-dev-server的安裝使用教程
- webpack搭建vue環境時報錯異常解決
- Vite+Electron快速構建VUE3桌面應用的實現