完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
我从 webpack 换到 vite，又换回了 webpack
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
前言
Vite 经过一段时间的发展，目前的生态现已非常丰厚了。它不仅用于 Vue，React、Svelte、Solid、Marko、Astro、Shopify Hydrogen，以及 Storybook、Laravel、Rails 等项目都现已接入了Vite，而且也趋于稳定，所以就着手把项目的 Webpack 替换为 Vite。
切换为 Vite
Vite 生态现在很丰厚了，底子上插件按名称搜索一下，照着文档就能够把 webpack 替换到 Vite。由于每个项目的装备都不相同，所以也没有什么统一的操作步骤，下面列一些典型替换的比方。
进口
index.html 的位置需求放到项目的最外层，而不是 public 文件夹内。相同 entry 的进口文件也需求从 pages 里换到 index.html 里。由 <script type="module" src="https://juejin.im/post/7160670274521104397/..."> 引进。
module.exports = defineConfig({
pages: {
index: {
// page 的进口
entry: 'src/main.ts',
// 模板来历
template: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
文件loader
这儿挑几个比方(下面比方 webpack 版本都为 webpack5)。
-
yaml由本来的yaml-loader替换为rollup-plugin-yamlx
rules: [
{
test: /.ya?ml$/,
use: 'yaml-loader'
}
]
import PluginYamlX from 'rollup-plugin-yamlx'
plugins: [
...other,
PluginYamlX()
]
-
svg-sprite由本来的svg-sprite-loader替换为vite-plugin-svg-icons
const resolve = (...dirs) => require('path').resolve(__dirname, ...dirs)
chainWebpack(config) {
const svgRule = config.module.rule('svg')
svgRule.exclude.add(resolve('base/assets/icons')).end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('base/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'ys-svg-[name]'
})
.end()
}
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
return resolve(__dirname, '.', dir)
}
plugins: [
...other,
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [pathResolve('base/assets/icons/svg')],
// Specify symbolId format
symbolId: 'ys-svg-[name]'
}),
]
- 留意文件加载方法的共同性，比方本来的
svg-loader直接import引证的是路径地址，而vite-svg-loader默许是Vue组件。 所以Vite需求把默许方法改成和webpack lodaer共同。
plugins: [
svgLoader({ defaultImport: 'url' })
]
每个替换的插件都要看一下文档，也许某个装备便是你需求的功用。
大局常量
比方开发的版本信息，开发环境变量等等。
new webpack.DefinePlugin({
APP_VERSION: process.env.VUE_APP_VERSION,
ENV_TEST: process.env.VUE_ENV_TEST
})
import { defineConfig, loadEnv } from 'vite'
const { VITE_SENV_TEST, VITE_APP_VERSION } = loadEnv(mode, process.cwd())
export default ({ mode }: { mode: string }) => {
return defineConfig({
define： {
APP_VERSION： VITE_APP_VERSION，
ENV_TEST：VITE_SENV_TEST
}
})
})
这儿留意，Vite 和 webpack 默许露出的环境变量前缀不相同。
主动加载模块
比方 lodash
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
]
import inject from '@rollup/plugin-inject'
plugins: [
inject({
_: 'lodash',
exclude: ['**/*.css', '**/*.yaml'],
include: ['**/*.ts', '**/*.js', '**/*.vue', '**/*.tsx', '**/*.jsx']
}),
]
底子上所有在用的插件都能够找到对应替换的，乃至像
monaco，qiankun，sentry运用量相对没那么大的都有。
这儿仅仅举例兼容旧代码，lodash 最好仍是写个工具替换成 es-loadsh。
webpack require context
在 webpack 中咱们能够经过require.context办法动态解析模块。比较常用的一个做法便是指定某个目录，经过正则匹配等方法加载某些模块，这样在后续增加新的模块后，能够起到动态主动导入的效果。
比方 layout，router 的主动注册都能够这样用。
const modules = require.context('base/assets/icons/svg', false, /.svg$/)
Vite 支撑运用特别的import.meta.glob函数从文件系统导入多个模块：
const modules = import.meta.glob('base/assets/icons/svg/*.svg')
externals
externals: {
config: 'config',
}
import { viteExternalsPlugin } from 'vite-plugin-externals'
plugins: [
viteExternalsPlugin({
config: 'config'
})
]
ESM 模块
由于 Vite 运用了 ESM 模块方法，所以 commonJs模块 都需求替换成 ESM模块。
const path = require('path')
import path from 'path'
也正是由于这个原因，所以才会又换回了 webpack，这个下面再讲。
主动化转化
社区也有一些主动化从Wepback转为Vite的工具，比方vue-cli-plugin-vite，webpack-to-vite，wp2vite等等。
假如是小项目，能够测验一下。大项目不建议运用，不可控。感兴趣的能够去看对应的文档。
ESM 的循环引证问题
能够看到 Vite 的 Issues 有许多相关的问题评论。
github.com/vitejs/vite… github.com/vitejs/vite…
假如是 Vue SFC 文件的循环引证，按官方文档来就能够解决。
假如是其他文件的循环引证，也能够梳理更改。可是吊诡的当地在于，调用栈会呈现 null。这个在开发中呈现了底子没办法debug。有时候有上下文，仅仅中心呈现null还能揣度一下，假如提示一串null，那底子没办法开发。
CommonJs 与 ESM 关于循环依靠的处理的战略是天壤之别的，webpack 在运转时注入的webpack_require逻辑在处理循环依靠时的体现与 CommonJs 规范共同。Webapck 依据 moduleId，先到缓存里去找之前有没有加载过，假如有加载过，就直接拿缓存中的模块。假如没有，就新建一个 module，并赋值给缓存中，然后调用 moduleId 模块。所以由于缓存的存在，呈现循环依靠时才不会呈现无限循环调用的状况。
由于 ESM 的静态 import 才能，能够在代码运转之前对依靠链路进行静态剖析。所以在 ESM 形式下，一旦发现循环依靠，ES6 自身就不会再去执行依靠的那个模块了，所以程序能够正常完毕。这也说明晰 ES6 自身就支撑循环依靠，确保程序不会由于循环依靠陷入无限调用。
正是由于处理机制的不同，导致 Vite 下循环引证的文件都会呈现调用栈为 null 的状况。
找了个webpack插件circular-dependency-plugin 查看了一下循环引证的文件，发现像下面这样跨多组件引证的当地有几十处。改代码也不太实际，只能先换回webpack了。
webpack 的优化
webpack 仍是用官方封装的 Vue CLI。
缓存
webpack4 仍是运用 hard-source-webpack-plugin 为模块供给中心缓存的，可是 webpack5 现已内置了该功用。
module.exports = {
chainWebpack(config) {
config.cache(true)
}
}
hard-source-webpack-plugin作者现已被webpack招安了，原插件也现已不保护了，所以有条件仍是升级到webpack5。
esbuild 编译
编译能够运用 esbuild-loader 来替换 babel-loader，打包这一块就和 Vite 相差不多了。
看了下 vue-cli 的装备，需求换的 rule 是这几个。大约的装备如下：
chainWebpack(config) {
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
jsxFactory: 'h',
jsxFragment: 'Fragment',
loader: 'jsx',
target: 'es2015'
})
.end()
const tsRule = config.module.rule('typescript')
tsRule.uses.clear()
tsRule
.use('ts')
.loader('esbuild-loader')
.end()
}
留意，上面的
jsx装备只适用于Vue3，由于Vue2没有露出h办法。
假如要在 Vue2 上运用 jsx 解析，得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D
React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github
大约便是把 jsx transform 从结构单独移了出来，以脱离结构适配 SWC，TSC 或许 ESBuild 的 jsx transform。
const rule = config.module.rule('js')
// 整理自带的babel-loader
rule.uses.clear()
// 增加esbuild-loader
rule
.use('esbuild-loader')
.loader('esbuild-loader')
.options({
target: 'es2015',
loader: 'jsx',
jsx: 'automatic',
jsxImportSource: '@lancercomet/vue2-jsx-runtime'
})
.end()
一起需求修正 tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx", // Please set to "react-jsx".
"jsxImportSource": "@lancercomet/vue2-jsx-runtime" // Please set to package name.
}
}
类型查看
类型查看这块开发时能够交给 IDE 来处理，没必要再跑一个线程。
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.plugins.delete('fork-ts-checker')
}
代码紧缩
这些其实功用影响现已不大了，聊胜于无。
const { ESBuildMinifyPlugin } = require('esbuild-loader')
chainWebpack(config) {
config.optimization.minimizers.delete('terser')
config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
}
优化成果
这是 Vue-CLI 优化之后的打包，现已和 Vite 底子共同了。至于开发，两者的逻辑不相同，热更新确实是慢。
完毕
Vite 的生态现已很丰厚了，底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快，而疏忽一些细节。
这便是本篇文章的全部内容了，感谢咱们的观看。
作者信息
洋小洋同学
等级普通