vite打包優(yōu)化CDN壓縮的分析實現(xiàn)

更新時間：2024年07月29日 10:15:09 作者：霧戀

我們在日常的工作中肯定會遇到項目打包優(yōu)化等問題,本文主要介紹了vite打包優(yōu)化CDN壓縮的分析實現(xiàn),具有一定的參加價值,感興趣的可以了解一下

背景

我們在日常的工作中肯定會遇到項目打包優(yōu)化等問題，而面對這種問題我們一般都是從一下方面進行優(yōu)化的，在這兒小小的記錄一下。

打包報告分析

我們想看打包以后各個文件或者依賴的大小時就需要用到rollup-plugin-visualizer插件進行分析，這樣我們就可以有針對性的進行優(yōu)化了，當然肯定還有其他的第三方插件，如果大家有更好的也可以使用其他的。

安裝依賴包

npm install rollup-plugin-visualizer -D
yarn add rollup-plugin-visualizer -D
pnpm install rollup-plugin-visualizer -D

當我們在安裝好依賴以后，就可以在vite.config.ts中配置以下代碼，當我們配置以后就會發(fā)現(xiàn)項目根目錄中生成了一個stats.html文件，我們開發(fā)該文件就可以進行查看打包后文件的大小了。

plugins: [
    visualizer({
      open: false, // 注意這里要設(shè)置為true，否則無效
      filename: 'stats.html', // 分析圖生成的文件名
      gzipSize: true, // 收集 gzip 大小并將其顯示
      brotliSize: true, // 收集 brotli 大小并將其顯示
    }),
]

CDN加速

我們在打包的時候很多第三方插件都會打包進去，這個時候就會大致包比較大，這個時候我們就需要用到第三方插件了，切記如果第三方插件你需要平凡更新的話，就不要用該方法，該處以lodash為例，開源的第三方cdn網(wǎng)站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',
    },
  ],
}),

圖片資源壓縮

我們的項目中肯定或多或少都會有不少的靜態(tài)資源圖片，如果我們的圖片比較大的情況下，在用戶首次拉取網(wǎng)站的情況下下載的資源就比較多或者大，這個時候我們就需要對靜態(tài)圖片進行一下壓縮工作，所以就需要用到改第三方插件。

安裝依賴：

npm install vite-plugin-cdn-import -D
yarn add vite-plugin-cdn-import -D
pnpm install vite-plugin-cdn-import -D

使用：
具體的配置可以查看官網(wǎng)

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