vue3+vite优化
vite配置优化
当前端资源过大时,服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右,压缩后的文件,通过后端简单处理,浏览器可以将其正常解析出来。
一、gzip压缩
vite: vite-plugin-compression
**vue-cli: compression-webpack-plugin**
**npm i compression-webpack-plugin -D**
**npm i vite-plugin-compression -D**
vite.config.js
import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins:[
viteCompression(
{
algorithm: 'gzip',
threshold: 10240,
verbose: false,
deleteOriginFile: true
}
)
]
})
这个配置项,我们通过algorithm指定了压缩算法为gzip;通过threshold指定文件大于10240b(10kb)时才压缩文件;通过verbose禁止在控制台输出压缩结果;通过deleteOriginFile指定压缩完文件后删除源文件
打包结果:
打包前dist文件大小:274kb
打包后:
我们看出部分文件进行了gzip压缩,并且删除了源文件。
打包后的dist文件大小:168kb,减少了100kb
二、打包出的文件整理,缓存静态资源
build: {
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: '[ext]/[name]-[hash].[ext]'
}
}
}
打包后结果:
三、分析打包结果
1.安装插件
npm i rollup-plugin-visualizer -D
2.在vite.config.js配置该插件
import { defineConfig,type PluginOption } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins:[
vue(),visualizer()
]
})
3.运行打包命令
npm run build
4.然后会在根目录下生成一个stats.html文件
5.打开这个html文件,里面是基于echarts生成的一个交互式打包组件分析图表
6.我们可以清晰地看到每个文件的大小占比、相互依赖关系
7.如果发现某些大文件应该是代码分割的,可以Return回去,针对这部分文件做Lazy Loading处理,再次打包分析,就可以看到体积显著缩小
所以这个插件可以直观地分析出打包结果,找到问题点进行针对性优化,从而减小最终打包体积。
四、生产环境删除debugger console代码
build: {
// 压缩JS代码
minify: 'terser',
// 压缩CSS代码
cssCodeSplit: true,
// 删除console等调试语句
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
五、拆分包
如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中,减少http请求,如果不同模块使用不同插件明显,那就分成不同模块打包。这是一个矛盾体。
这里使用的是最小化拆分包。如果是前者可以直接选择返回'vendor'。
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
// 让每个插件都打包成独立的文件
return id .toString() .split("node_modules/")[1] .split("/")[0] .toString();
}
}
}
}
六、CDN加速
内容分发网络(Content Delivery Network,简称 CDN)就是让用户从最近的服务器请求资源,提升网络请求的响应速度。同时减少应用打包出来的包体积,利用浏览器缓存,不会变动的文件长期缓存。
使用rollup自带的external
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
visualizer({ open: true }),
],
build: {
rollupOptions: {
external: ['vue', 'element-plus','vue-router'], //告诉打包工具 在external配置的 都是外部依赖项 不需要打包
},
},
})
然后再index.html引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite Vue TS</title>
<script src="https://unpkg.com/element-plus@2.3.8/dist/index.full.js"></script>
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.1.6/dist/vue-router.global.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
注意:
使用 CDN 未必会加快速度,只能减小打包体积,因为对应 js 和 css 需要从远程地址读取
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfkghcb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13