网站 白名单,wordpress自动播放音乐,网站国际推广,腾讯云wordpress安装教程是什么
Vite是Vue的作者尤雨溪开发的 一种新型前端构建工具。 Vite在大型项目开发模式下#xff0c;打包速度远高于webpack。
Vite 为什么这么快
1. 快速冷启动
Vite只启动一台静态页面的服务器#xff0c;不会打包全部项目文件代码#xff0c;服务器根据客户端的请求加…是什么
Vite是Vue的作者尤雨溪开发的 一种新型前端构建工具。 Vite在大型项目开发模式下打包速度远高于webpack。
Vite 为什么这么快
1. 快速冷启动
Vite只启动一台静态页面的服务器不会打包全部项目文件代码服务器根据客户端的请求加载不同的模块处理实现按需加载。 而我们所熟知的webpack则是一开始就将整个项目都打包一遍再开启dev-server如果项目规模庞大时间必然很长。
2. 热模块更新
对于热更新问题Vite采用立即编译当前修改文件的办法同时结合vite的缓存机制http缓存 》 Vite内置缓存加载更新后的文件内容
3. 打包编译速度
Vite使用esbuild预构建依赖而esbuild是用Go编写的比JS编写的打包器快很多。
常用配置
vite.config.js 文件
import { defineConfig } from vite // 使用 defineConfig 工具函数获取类型提示
import vue from vitejs/plugin-vue
import { viteMockServe } from vite-plugin-mockexport default defineConfig({/* 》 打包配置 《 *//** base 当使用 yarn build 命令构建应用程序时base 配置项会影响生成的静态文件的路径确保在部署时能够正确访问到这些文件。* 如果应用程序部署在域名的 根路径 下则可以将 base 配置项 省略 或设 为 / 实际开发中这是大多数情况。* 当应用程序部署到不同路径下时base 配置项非常有用。例如如果您的应用程序部署在域名的 子路径 下* 如 https://www.example.com/my-app/则需要这么配置 base: /my-app/*/base: /foo/, // 开发或生产环境服务的公共基础路径build: {outDir: build, // 打包文件 的 输出目录assetsDir: static, // 静态资源 的 存放目录assetsInlineLimit: 4096 // 图片转 base64 编码的阈值},/* 》 开发配置 《 */resolve: {alias: {: path.resolve(__dirname, ./src) // 路径别名},extensions: [.js, .ts, .json] // 导入时想要省略的扩展名列表不建议包含 .vue 因为他会影响 IDE 和类型的支持。},server: {/* 将 host 设置为 true 或 0.0.0.0 这样服务器就会监听所有地址包括局域网和公网地址。当手机和电脑处于同一个网络环境下就可以通过地址进行访问了。 */host: true, /* 反向代理也是经常会用到的一个功能通常使用它来进行跨域 */proxy: {// 字符串简写写法/foo: http://localhost:4567,// 选项写法/zlhx: {target: http://localhost:8008,changeOrigin: true,rewrite: path path.replace(/^\/zlhx/, zlhx)}// 正则表达式写法^/fallback/.*: {target: http://jsonplaceholder.typicode.com,changeOrigin: true,rewrite: (path) path.replace(/^\/fallback/, )},// 使用 proxy 实例/api: {target: http://jsonplaceholder.typicode.com,changeOrigin: true,configure: (proxy, options) {// proxy 是 http-proxy 的实例}},// Proxying websockets or socket.io/socket.io: {target: ws://localhost:3000,ws: true}}},// 插件plugins: [vue(),viteMockServe()]
})
