网站首页 > 前端 > 正文

前端 node.js 手把手教你从webpack迁移到vite，仅6步~！

计算机编程前端 2024-04-23 17 0

文章目录

启动耗时对比操作步骤1. 修改 index.html2. 修改 package.json3. 重新安装依赖4. 创建vite.config.js5. 修改require导入6. 修改环境变量判断

Vite优点

Vite 开发快速入门

启动耗时对比

webpack 启动耗时23s左右： vite 启动耗时0.5s左右：

优势一目了然 ~

操作步骤

1. 修改 index.html

把 public/index.html 移动到项目根目录把文件中的<%= BASE_URL %>、<%= PUBLIC_URL %>去掉(是webpack内置的全局环境变量，vite无法使用，vite的环境变量属性存放在import.meta.env中)在 index.html 文件中引入mian.js

平台

2. 修改 package.json

删除不需要的依赖，如 eslint, babel, webpack,各种 loader 和 plugin 等依赖修改 scripts, 和devDependencies

{

"scripts": {

"serve": "vite",

"build": "vite build",

"test": "vite build --mode test",

"preview": "vite preview"

"devDependencies": {

"@vitejs/plugin-vue": "^4.4.0",

"babel-plugin-import": "^1.13.5",

"sass": "^1.32.7",

"sass-loader": "^12.0.0",

"vite": "^4.4.11",

"vite-plugin-compression": "^0.5.1"

// 以下删除

//"@vue/cli-plugin-babel": "~5.0.0",

//"@vue/cli-plugin-router": "~5.0.0",

//"@vue/cli-plugin-vuex": "~5.0.0",

//"@vue/cli-service": "~5.0.0",

//"compression-webpack-plugin": "^10.0.0",

}

3. 重新安装依赖

删除 node_modules 文件夹删除 yarn.lock package-lock.json删除 config , scripts 文件夹，这些文件夹，包含了一些 webpack 的配置和启动脚本（如果项目没有，可以忽略这一步）并重新安装依赖（yarn install）

4. 创建vite.config.js

vue.config.js 文件删掉，并在根目录新建 vite.config.js 配置文件，贴出我的配置，仅供参考：

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import compressPlugin from 'vite-plugin-compression';

import { resolve } from 'path';

export default defineConfig(config => ({

base: '/',

plugins: [

// 配置需要使用的插件列表

vue(),

compressPlugin({

ext: '.gz'

})

server: {

host: '0.0.0.0',

port: 9700,

cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源

open: true, //服务启动时自动在浏览器中打开应用

strictPort: false, //设为true时端口被占用则直接退出，不会尝试下一个可用端口

// 反向代理配置

proxy: {

'/api': {

proxy: 'https://dev.xxx.com/api/',

changeOrigin: true,

rewrite: path => path.replace(/^\/api/, '')

}

resolve: {

//配置别名

alias: {

'@': resolve(__dirname, 'src'),

'/images': 'src/assets/images'

extensions: ['.vue', '.js', '.json']

build: {

// 指定输出路径

outDir: 'dist',

// 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项

assetsInlineLimit: 4096, // 默认：4kb

// chunk 大小警告的限制

chunkSizeWarningLimit: 1500,

//启用/禁用 CSS 代码拆分

cssCodeSplit: true,

//构建后是否生成 source map 文件

sourcemap: false,

//当设置为 true，构建后将会生成 manifest.json 文件

manifest: false,

// 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器

// boolean | 'terser' | 'esbuild'

minify: 'terser', //terser 构建后文件体积更小

//默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。

emptyOutDir: true,

//启用/禁用 brotli 压缩大小报告

brotliSize: true,

// 预加载

modulePreload: {

polyfill: true

rollupOptions: {

// 打包之前是否先清空文件夹

output: {

chunkFileNames: 'js/[name]-[hash].js', // 自定义命名代码分割中产生的 chunk

entryFileNames: 'js/[name]-[hash].js', // 指定 chunks 的入口文件模式

assetFileNames: ({ name }) => {

// 自定义构建结果中的静态资源名称

const images = ['jpg', 'gif', 'png', 'webp'];

// 获取最后一个扩展名

const ext = [...name.split('.')].pop();

let floder = ext;

if (images.includes(ext)) {

floder = 'images';

}

return `${floder}/[name]-[hash].[ext]`;

}, // 资源文件像字体，图片等

manualChunks(id) {

// 将node_modules的扩展单独进行打包

if (id.includes('node_modules')) {

return id.toString().split('node_modules/')[1].split('/')[0].toString();

}

esbuild: {

// 移除打包环境的console 和 debugger

drop: config.mode === 'development' ? [] : ['debugger', 'console'],

logOverride: {

// 忽略未使用变量警告

'assign-to-constant': 'silent',

// 忽略return空警告

'semicolon-after-return': 'silent'

}

}));

5. 修改require导入

require 无法使用，require是webpack自带的在vite里要用import导入文件，可以手动封装一个vite版的require导入找到你项目中全部的 require 函数进行替换，参考如下：

// 封装一个`vite`版的`require`导入

export const require = url => {

// 将图片导为模块

const picModules = import.meta.globEager('../assets/images/**')

const _url = url.replace('@','')

// 获取图片模块

// 获取指定的图片

const path = `..${_url}`

return picModules[path].default

}

使用：

6. 修改环境变量判断

有的项目中使用了环境变量判断如 process.env.VUE_APP_ENV === 'development' ，也需要修改一下，具体请参考 vite文档

axios.js： // if (process.env.VUE_APP_ENV === 'development') {

// // 开发环境 - 编译

// // 开发环境有跨域走proxy代理

// }

// if (process.env.VUE_APP_ENV === 'test') {

// // 测试环境 - 打包

// axios.defaults.baseURL = 'https://test.xxx.com/api/';

// }

// if (process.env.VUE_APP_ENV === 'production') {

// // 生产环境 - 打包

// axios.defaults.baseURL = 'https://pro.xxx.com/api/';

// }

// 改成：

axios.defaults.baseURL = import.meta.env.VITE_BaseUrl;

.env.development： // VUE_APP_ENV = 'development'

// 改成：

VITE_BaseUrl = 'https://dev.xxx.com/api/'

.env.production： // VUE_APP_ENV = 'production'

// 改成：

VITE_BaseUrl = 'https://pro.xxx.com/api/'

.env.test： // VUE_APP_ENV = 'test'

// 改成：

VITE_BaseUrl = 'https://test.xxx.com/api/'

最后 npm run dev 即可

Vite优点

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。

Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间：

依赖大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。 Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。源码通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。 Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

精彩链接

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

webpack 前端 node.js vite

本文由用户于 2024-04-23 发布在金钥匙，如有疑问，请联系我们。
本文链接：https://www.51969.com/post/17822860.html

金钥匙

前端 node.js 手把手教你从webpack迁移到vite，仅6步~！

vue.js 前端 webpack Vue项目打包问题（生产环境样式失效）

前端 node.js webpack提升构建速度

发表评论取消回复

金钥匙

前端 node.js 手把手教你从webpack迁移到vite，仅6步~！

vue.js 前端 webpack Vue项目打包问题（生产环境样式失效）

前端 node.js webpack提升构建速度

相关文章

发表评论取消回复