本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
2022年 🔥爆
Vite
下一代前端开发
与构建
工具 相比Webpack
是一个用于现代 JavaScript 应用程序的 静态模块打包工具 ,在Vite
没出现前本人一直在用Webpack
感觉还可以。除了运行
项目比较慢
、更新
代码比较慢
其他都可以。 目前Vite
2.7版本已稳定在项目实践完胜Webpack
,Vite
相关文档很少开发过程中会出现很多坑
,本着我不入地狱谁入地狱的思想开始一段漫长填坑之旅
推荐阅读
初始化项目
npm init vite@latest
√ Project name: ... admin-vite
√ Select a framework: » vue
√ Select a variant: » vue-ts
Scaffolding project in D:\Juejin\admin-vite...
Done. Now run:
cd admin-vite
npm install
npm run dev
vite.config.ts 之 Plugins 篇 (一)
vite-plugin-vue-setup-extend setup name 增强插件
Vue3
的setup
语法糖是个好东西,但使用setup
语法带来的第一个问题就是无法自定义name
,而我们使用keep-alive
往往是需要name
的,解决这个问题通常是通过写两个script
标签来解决,一个使用setup
,一个不使用,但这样必然是不够优雅的。 来源:小学生study
- 安装
# 选择一个你喜欢的包管理器
# NPM
npm install vite-plugin-vue-setup-extend -D
# Yarn
yarn add vite-plugin-vue-setup-extend -D
# PNPM
pnpm install vite-plugin-vue-setup-extend -D
- 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueSetupExtend()],
})
- 使用
// App.vue
<script setup lang="ts" name="App">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
@vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持
Vite 的默认浏览器支持基线是Native ESM,此插件为不支持本机 ESM 的旧版浏览器提供支持。
- 安装
# 选择一个你喜欢的包管理器
# NPM
npm install @vitejs/plugin-legacy -D
# Yarn
yarn add @vitejs/plugin-legacy -D
# PNPM
pnpm install @vitejs/plugin-legacy -D
- 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueSetupExtend(),
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
})
以 IE11以上(不兼容IE11) 为目标时,您还需要
regenerator-runtime
:
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueSetupExtend(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
],
})
vite-plugin-compression 压缩插件
vite-plugin-compression
是 vite-plugin-compress的升级版,vite-plugin-compression
支持gzip等多种压缩算法
- 安装
# 选择一个你喜欢的包管理器
# NPM
npm install vite-plugin-compression -D
# Yarn
yarn add vite-plugin-compression -D
# PNPM
pnpm install vite-plugin-compression -D
- 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import compressPlugin from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueSetupExtend(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
compressPlugin({
verbose: false, // 是否在控制台输出压缩结果
disable: false, // 是否禁用
threshold: 10240, // 文件容量大于这个值进行压缩,它将被压缩,单位为b
algorithm: 'gzip', // 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']
ext: '.gz', // 生成的压缩包后缀
}),
],
})
vite-plugin-imagemin 图片压缩
- 安装
# 选择一个你喜欢的包管理器
# NPM
npm install vite-plugin-imagemin -D
# Yarn
yarn add vite-plugin-imagemin -D
# PNPM
pnpm install vite-plugin-imagemin -D
- 安装注意
国内安装是可能会失败出现
‼ connect ETIMEDOUT 182.43.124.6:443│ ‼ gifsicle pre-build test failed
提示。解决方法在package.json
配置文件添加resolutions
代码如下:
{
"name": "admin-vite",
"private": true,
"version": "0.0.0",
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
....
}
- 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import compressPlugin from 'vite-plugin-compression'
import viteImagemin from 'vite-plugin-imagemin'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueSetupExtend(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
compressPlugin({
verbose: false, // 是否在控制台输出压缩结果
disable: false, // 是否禁用
threshold: 10240, // 文件容量大于这个值进行压缩,它将被压缩,单位为b
algorithm: 'gzip', // 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']
ext: '.gz', // 生成的压缩包后缀
}),
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 20,
},
pngquant: {
quality: [0.8, 0.9],
speed: 4,
},
svgo: {
plugins: [
{
name: 'removeViewBox',
},
{
name: 'removeEmptyAttrs',
active: false,
},
],
},
}),
],
})
运行
npm run dev
打包
npm run build
生成目录
npm install --global treer
treer -e ./result.md -i "/node_modules|git|dist/"
本章最终目录如下:
├─index.html
├─package.json
├─pnpm-lock.yaml
├─README.md
├─tsconfig.json
├─tsconfig.node.json
├─vite.config.ts
├─src
| ├─App.vue
| ├─env.d.ts
| ├─main.ts
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
| └favicon.ico
├─.vscode
| ├─extensions.json
| └settings.json
2022/2/15日更新
Vue
、Vite
、vite-plugin-compression
、vite-plugin-imagemin
、vite-plugin-vue-setup-extend
、typescript
最新版本
{
"name": "admin-vite",
"private": true,
"version": "0.0.1",
"author": {
"name": "SunHongYu",
"email": "17600616235@163.com",
"url": "https://juejin.cn/"
},
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
"scripts": {
"bootstrap": "pnpm install",
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "npm run build && vite preview",
"preview:dist": "vite preview",
"clean": "rimraf node_modules",
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite"
},
"dependencies": {
"vue": "^3.2.31"
},
"devDependencies": {
"@vitejs/plugin-legacy": "^1.7.1",
"@vitejs/plugin-vue": "^2.2.0",
"@vue/compiler-sfc": "^3.2.31",
"typescript": "^4.5.5",
"vite": "^2.8.2",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-imagemin": "^0.6.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^0.31.2"
}
}
继续学习
废话只说一句:码字不易求个👍,收藏 === 学会,快行动起来吧!🙇🙇🙇。