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',
}),

总结

以上的几种方法是打包优化的基本方法，大家可以根据各自的需要进行配置以及增加其他的打包优化等问题。