手把手教你从webpack迁移到vite，仅6步~！

news2024/9/24 7:20:38

在这里插入图片描述

文章目录

  • 启动耗时对比
  • 操作步骤
    • 1. 修改 index.html
    • 2. 修改 package.json
    • 3. 重新安装依赖
    • 4. 创建vite.config.js
    • 5. 修改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
<!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" type="image/svg+xml" href="/favicon.ico" />
        <title>平台</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>

2. 修改 package.json

  1. 删除不需要的依赖，如 eslint, babel, webpack,各种 loader 和 plugin 等依赖
  2. 修改 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. 重新安装依赖

  1. 删除 node_modules 文件夹
  2. 删除 yarn.lock package-lock.json
  3. 删除 config , scripts 文件夹， 这些文件夹，包含了一些 webpack 的配置和启动脚本（如果项目没有，可以忽略这一步）
  4. 并重新安装依赖（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
}

使用：

<template>
	<el-image :src="require('@/assets/images/login-bg.jpg')" />
</template>

<script setup>
// 引入即可：
import { require } from '@/utils'
</script>

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 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1079595.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

9-AJAX-上-原理详解

9-AJAX-上-原理详解

一、定义 1、什么是Ajax Ajax&#xff1a;即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与进行少量数据交换&#xff0c;Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下&#xff0c;对网页的某部分进行更新。而传统的…
阅读更多...
堆专题1 向下调整构建大顶堆

堆专题1 向下调整构建大顶堆

题目&#xff1a; 样例&#xff1a; 输入 6 3 2 6 5 8 7 输出 8 5 7 3 2 6 思路&#xff1a; 堆&#xff0c;是一颗完全二叉树&#xff0c;树中每个节点的值都不小于&#xff08;或不大于&#xff09;其左右孩子结点的值。 其中&#xff0c; 父结点大于或者等于孩子结点的值…
阅读更多...
8+纯生信，多组机器学习+分型探讨黑色素瘤发文思路。

8+纯生信，多组机器学习+分型探讨黑色素瘤发文思路。

今天给同学们分享一篇泛癌多组机器学习分型的生信文章“Comprehensive characterisation of immunogenic cell death in melanoma revealing the association with prognosis and tumor immune microenvironment”&#xff0c;这篇文章于2022年9月23日发表在Front Immunol 期刊…
阅读更多...
国际数学教材扫盲知识（持续更新中）

国际数学教材扫盲知识（持续更新中）

缩写 A-LEVEL&#xff08;大学预科&#xff09;&#xff1a;General Certificate of Education Advanced Level AP&#xff1a;Advanced Placement&#xff08;美国地区&#xff1a;美高AP&#xff09; GCSE&#xff1a;General Certificate of Secondary Education&#xf…
阅读更多...
ubuntu下使用gcc编译c程序: “error: stray ‘\357’ in program“

ubuntu下使用gcc编译c程序: “error: stray ‘\357’ in program“

现象&#xff1a; ubuntu下使用gcc编译c程序: “error: stray ‘\357’ in program“ 尝试查找原因&#xff1a;打开从windos直接粘贴c程序到ubuntu的c代码&#xff0c;发现多了 <200b>&#xff1a; 方案&#xff1a;尝试在vim编辑器删除&#xff0c;多出来的字符后编译…
阅读更多...
如何实现前端缓存管理？

如何实现前端缓存管理？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
【MTK】【WIFI】手机和综测仪器误差在5db左右误差

【MTK】【WIFI】手机和综测仪器误差在5db左右误差

在测试的时候发现CMU设置的信号强度和工程模式差异过大 原因分析是因为5G Rx Feloss没有填写导致 如下设置5G WF0 Tx/Rx Feloss; 指的是chipout 到测试座处的loss; 5*0.52.5dB 这样测下来误差就会在3db之内了&#xff0c;达到测试标准了
阅读更多...
B 开组会(可持久线段树+树剖) 武汉大学2023年新生程序设计竞赛（同步赛）

B 开组会(可持久线段树+树剖) 武汉大学2023年新生程序设计竞赛（同步赛）

其实题目就是每次询问一个节点 在这个节点的基础上往下继续遍历t的深度&#xff0c;在这个遍历的过程中找一个最大值就行了 其实这个题目数据非常水&#xff0c;直接暴力就可以过了 下面是别人过的代码 #include<bits/stdc.h> using namespace std; const int mxn5e…
阅读更多...
C# 超好用的自定义异形窗体

C# 超好用的自定义异形窗体

1 功能介绍 项目上要用到圆形的按钮打开界面，类似于什么加速球，内存清理球，点击圆形按钮打开界面等等功能，通过这个例子就可以简单实现，图片是什么样的，他就是什么窗体，无锯齿，很好用，工程文件代码放在末尾2 效果图片 3 代码测试 1 创建.netframework winform项目，引…
阅读更多...
分库分表Springboot-Starter源码解析

分库分表Springboot-Starter源码解析

在网上看到一个开源的分库分表组件&#xff0c;并且通过SPI机制做成了springboot的starter&#xff0c;觉得挺有意思的&#xff0c;给大家介绍一下。** 首先有两个mapper对象&#xff0c;一个是普通的mapper&#xff0c;一个是分库分表的mapper&#xff0c;分别往数据库插入数据…
阅读更多...
MES系统安灯管理：实时可视化生产线状态

MES系统安灯管理：实时可视化生产线状态

一、MES系统安灯管理的意义&#xff1a; 安灯管理是指通过使用不同颜色的灯光信号来表示生产线的状态&#xff0c;以便生产人员能够直观地了解生产线的运行情况。MES系统安灯管理的意义在于提供一个实时可视化的工具&#xff0c;使制造企业能够及时发现生产线异常和潜在问题&a…
阅读更多...
用TRIZ创新方法理论指导产品研发学习笔记

用TRIZ创新方法理论指导产品研发学习笔记

事物的矛盾法则 事物的矛盾法则&#xff0c;也称为辩证法的矛盾法则&#xff0c;是马克思主义哲学中的一个基本概念&#xff0c;用于描述事物内部矛盾的本质和发展规律。这个法则强调&#xff0c;事物内部存在着矛盾&#xff0c;而矛盾是事物发展的动力和源泉。 TRIZ理论解决…
阅读更多...
代码随想录算法训练营第五十六天 |1143.最长公共子序列、1035.不相交的线、53. 最大子序和动态规划

代码随想录算法训练营第五十六天 |1143.最长公共子序列、1035.不相交的线、53. 最大子序和动态规划

一、1143.最长公共子序列 题目链接/文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;动态规划子序列问题经典题目 | LeetCode&#xff1a;1143.最长公共子序列_哔哩哔哩_bilibili 思考&#xff1a; 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]…
阅读更多...
Jenkins对应java版本

Jenkins对应java版本

官网地址&#xff1a;Java Support Policy 运行jenkins时,需要使用下列Java版本:
阅读更多...
UEFI基础——测试用例Hello Word

UEFI基础——测试用例Hello Word

Hello 测试用例 硬件环境&#xff1a;龙芯ls3a6000平台 软件环境&#xff1a;龙芯uefi固件 GUID获取网址&#xff1a;https://guidgen.com 一、创建工程 mkdir TextPkg/三个文件 Hello.c 、 Hello.inf 、HelloPkg.dsc 1.1 Hello.c /** fileThe application to print hello …
阅读更多...
【踩坑】hive脚本笛卡尔积严重降低查询效率问题

【踩坑】hive脚本笛卡尔积严重降低查询效率问题

前一阵子查看我们公司的大数据平台的离线脚本运行情况, 结果发现有一个任务居然跑了一天多, 要知道这还只是几千万量级的表, 且这个任务是每天需要执行的 于是我把hive脚本捞出来看了下, 发现无非多join了几个复杂的子查询, 应该不至于这么久, 包括我又检查了是不是没有加上每…
阅读更多...
TCP/IP(五)TCP的连接管理(二)

TCP/IP(五)TCP的连接管理(二)

一 ISN序列号探究 本文主要探究三次握手建立TCP连接的细节备注&#xff1a; 某些问题探究的比较深入,当前用不到,暂时通过链接引入进来吃水不忘挖井人&#xff1a; 小林 coding ① 初始序列号 ISN 是如何随机产生的 ISN: 初始化序列号 Initial Sequence Number 接收方和…
阅读更多...
0基础学习VR全景平台篇 第106篇：认识调色软件Lightroom

0基础学习VR全景平台篇 第106篇：认识调色软件Lightroom

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 正式开讲之前需要先引出一个概念&#xff1a;到底什么是调色? 比如说上面这张照片&#xff0c;你可能会具体的指出照片中的元素有天空、山脉、草地等…… 如果我们跳出我们的固…
阅读更多...
sqlserver2008安装时的性能计数器注册表配置单元一致性失败问题

sqlserver2008安装时的性能计数器注册表配置单元一致性失败问题

安装出现此项检测失败时&#xff1b;根据资料&#xff0c; 进入注册表如下条目&#xff0c;Perflib下面有 Last Counter和Last Help&#xff0c;数值分别是10122和10123&#xff1b; 009键下面包括Counter和Help&#xff0c;打开Counter看一下&#xff0c;下面有一些数值&…
阅读更多...
关键词搜索淘宝商品数据接口，淘宝商品列表数据接口

关键词搜索淘宝商品数据接口，淘宝商品列表数据接口

关键词搜索淘宝商品数据接口可以通过淘宝开放平台获取商品列表数据&#xff0c;包括商品标题、价格、优惠价、收藏数、月销售量、SKU图、详情页图片等。 通过调用淘宝开放平台的API接口&#xff0c;可以实现关键词搜索淘宝商品列表数据&#xff0c;获取商品详情页数据信息&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023