vite项目构建优化
前言
作者最近在开发的项目有一个使用到了
vite
构建工具,在构建项目时,当时看到这个就是我的天!这个包怎么这么大!于是,我对他做了一场小手术。
下面我将给大家带来如何优化一个vite
项目的几个小方法
配置路由懒加载
当打包构建应用时,JavaScript
包会变得非常大,影响页面加载。这时,我们可以将这些组件拆分出来,变成多个chunk
,当用户首次进入页面时才会加载对应的文件。避免一次性将所有组件请求下来。
这里需要注意的是,页面中的组件也是可以被拆分出来的,如果过分的拆分在未开启http2时会发生请求阻塞问题!!
export default [
{ path: '/', component: import('../views/Register/index.vue') },
{ path: '/Login', component: import('../views/Login/index.vue') },
{ path: '/Register', component: import('../views/Register/index.vue') },
{ path: '/Questions', component: import('../views/Questions/index.vue') },
{ path: '/Report', component: import('../views/Report/index.vue') },
{ path: '/UserInfo', component: import('../views/UserInfo/index.vue') },
{ path: '/Record', component: import('../views/Record/index.vue') }
] as Array<RouteRecordRaw>;
分析构建
安装rollup-plugin-visualizer
插件,该插件用于分析依赖大小占比。
npm install rollup-plugin-visualizer @types/rollup-plugin-visualizer -D
在vite.config.ts
中引入并使用它。
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
// ...
plugins: [
// 将这个visualizer插件放到最后的位置中
visualizer()
]
});
当你配置完毕之后,在你下一次npm build
项目时,会在目录下创建一个stats.html
,里面即是你项目中的分析结果。分析中你可以将空间占比比较大的文件进行适当的优化。
代码压缩
安装vite-plugin-compress
插件,对项目中的代码进行gzip
压缩或brotli
压缩
npm install vite-plugin-compress -s
在vite.config.ts
中引入并使用它。
import compress from 'vite-plugin-compress'
export default defineConfig({
// ...
plugins: [
compress(),
]
});
图片压缩
安装vite-plugin-imagemin
插件,对项目中的图片进行压缩处理。
npm i vite-plugin-imagemin -D
在vite.config.ts
中引入并使用它。
import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
// ...
plugins: [
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
}
]
}
}),
]
});
优化包体积
在vue3
中,许多的Api
都是可以被tree-shake
优化,也即是你的项目中使用到了某些API
只打包这些被使用到的API
,减少包的体积。在选择第三方库时,尽量使用ES版本就比如lodash-es
和lodash
,前者是ES6
格式的代码可以被tree-shake
,而lodash
则是全部引入,体积较大。
兼容
目前,大部分的浏览器支持了ESM
,但部分旧版浏览器不支持ESM
,此时就需要使用@vitejs/plugin-legacy
来兼容这些旧版的浏览器。详细请戳这里
安装@vitejs/plugin-legacy
npm install @vitejs/plugin-legacy -s
在vite.config.ts
中引入并使用它。
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
// ...
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
]
});
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekgf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24