Vue3单文件入口项目本地调试优化-webpack转vite方案总结

背景

换了部门,接手了一个Vue3项目,这个项目使用webpack打包,进行本地调试和构建生产版本, 在本地开发调试时, 随着项目体积的增加, 基于js的webpack构建工具很快就遇到性能瓶颈, 通常需要几分钟甚至更长的时间才能启动开发服务器, 即使使用HMR, 变更也需要至少几秒甚至更久才能在浏览器中反映出来, 为了解决本地开发启动慢, 提升开发本地研发效率, 采用目前社区最新的比较流行的vite作为本地开发前端构建工具, 生产构建仍旧使用webpack方案构建。

准备工作

  1. Vite 需要 Node.js 版本 14.18+,16+。
  2. 必要插件:@vitejs/plugin-vue、@vitejs/plugin-vue-jsx(vue2 的项目对应使用的是 vite-plugin-vue2)
  3. 对于 vue3 的项目,因为 @vitejs/plugin-vue 要求 vue 在 3.2.25 版本以上,所以如果是 3.2.25 之前的 vue3 项目,需要先升级,否则项目启动会产生如下报错:
Error: Failed to resolve vue/compiler-sfc.

@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.

具体步骤

1. 项目根目录增加index.html和vite.config.js文件

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache" content="no-cache" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <link rel="icon" href="favicon.ico" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

2. 项目安装vite、@vitejs/plugin-vue、@vitejs/plugin-vue-jsx(jsx语法需要)、@vitejs/plugin-legacy插件

//安装vite
yarn add vite -D
//安装@vitejs/plugin-vue
yarn add @vitejs/plugin-vue -D
//安装@vitejs/plugin-vue-jsx
yarn add @vitejs/plugin-vue-jsx -D
//安装@vitejs/plugin-legacy
yarn add @vitejs/plugin-legacy -D

3.在package.json文件中增加vite命令行

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
      ...
      "serve-vite": "vite",
      "build-vite": "vite build",
      "preview-vite": "vite preview"
  },
  ...
}

4. 关于webpack和vite获取环境变量写法不同的兼容

//webpack写法
procsss.env.xxx 
//vite写法
import.meta.env.xxx

注意:如果在想在vite中让procsss.env.xxx这种写法生效的话,需要用到vite配置中的define属性具体配置如下:

//vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
    define:{
         'process.env.NODE_ENV': '"development"',
         'process.env.BASE_URL': '"/"',
         ...
         }
})

5. 静态资源引入写法不同兼容

使用vite启动项目,发现一些静态资源报404
Vue3单文件入口项目本地调试优化-webpack转vite方案总结

这种情况需要在vite.config.js文件中配置alias


import { defineConfig } from 'vite';
import path, { resolve } from 'path';
export default defineConfig({
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: ''
      },
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      },
      {
        find: '~@',
        replacement: path.resolve(__dirname, 'src')
      }
    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
  ...
  })

本地启动时间对比

原vue-cli启动时间

Vue3单文件入口项目本地调试优化-webpack转vite方案总结

vite启动时间

Vue3单文件入口项目本地调试优化-webpack转vite方案总结

webpack转vite工具探索

wp2vite

npx wp2vite --config=./vue.config.js

wp2vite会自动生成vite.config.js和index.html文件,以及相关依赖。

总结问题:

  1. wp2vite生成的vite.config.js配置基本上是复制vue.config.js文件的内容,需要手动更改,例如代理配置、define配置等。
  2. 以上述项目为例,wp2vite自动安装的依赖会出现版本不兼容的问题。

Vue3单文件入口项目本地调试优化-webpack转vite方案总结
感受:读取并转换的配置较少,会生成部分配置(但这些配置不一定需要使用)

原文链接:https://juejin.cn/post/7355875083502862363 作者:不吃爆米花

(0)
上一篇 2024年4月10日 上午11:14
下一篇 2024年4月10日 下午4:05

相关推荐

发表回复

登录后才能评论