vite打包优化CDN压缩的分析实现
作者：雾恋
我们在日常的工作中肯定会遇到项目打包优化等问题,本文主要介绍了vite打包优化CDN压缩的分析实现,具有一定的参加价值,感兴趣的可以了解一下
背景
我们在日常的工作中肯定会遇到项目打包优化等问题，而面对这种问题我们一般都是从一下方面进行优化的，在这儿小小的记录一下。
打包报告分析
我们想看打包以后各个文件或者依赖的大小时就需要用到rollup-plugin-visualizer插件进行分析，这样我们就可以有针对性的进行优化了，当然肯定还有其他的第三方插件，如果大家有更好的也可以使用其他的。
安装依赖包
npm install rollup-plugin-visualizer -D yarn add rollup-plugin-visualizer -D pnpm install rollup-plugin-visualizer -D
当我们在安装好依赖以后，就可以在vite.config.ts中配置以下代码，当我们配置以后就会发现项目根目录中生成了一个stats.html文件，我们开发该文件就可以进行查看打包后文件的大小了。
plugins: [
visualizer({
open: false, // 注意这里要设置为true，否则无效
filename: 'stats.html', // 分析图生成的文件名
gzipSize: true, // 收集 gzip 大小并将其显示
brotliSize: true, // 收集 brotli 大小并将其显示
}),
]CDN加速
我们在打包的时候很多第三方插件都会打包进去，这个时候就会大致包比较大，这个时候我们就需要用到第三方插件了，切记如果第三方插件你需要平凡更新的话，就不要用该方法，该处以lodash为例，开源的第三方cdn网站bootcdn
// 安装插件
npm install vite-plugin-cdn-import
// 引入
import importToCDN from 'vite-plugin-cdn-import';
// 使用
importToCDN({
modules: [
{
name: 'lodash',
var: '_',
path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
},
],
}),图片资源压缩
我们的项目中肯定或多或少都会有不少的静态资源图片，如果我们的图片比较大的情况下，在用户首次拉取网站的情况下下载的资源就比较多或者大，这个时候我们就需要对静态图片进行一下压缩工作，所以就需要用到改第三方插件。
安装依赖：
npm install vite-plugin-cdn-import -D yarn add vite-plugin-cdn-import -D pnpm install vite-plugin-cdn-import -D
使用：
具体的配置可以查看官网
import viteImagemin from 'vite-plugin-imagemin';
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 install vite-plugin-compression -D
yarn add vite-plugin-compression -D
// 引用
import viteCompression from 'vite-plugin-compression';
// 使用
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),总结
以上的几种方法是打包优化的基本方法，大家可以根据各自的需要进行配置以及增加其他的打包优化等问题。更多相关vite打包优化CDN压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！