快捷導(dǎo)航

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

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

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

背景

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

打包報(bào)告分析

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

安裝依賴包

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

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

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

CDN加速

我們在打包的時(shí)候很多第三方插件都會(huì)打包進(jìn)去，這個(gè)時(shí)候就會(huì)大致包比較大，這個(gè)時(shí)候我們就需要用到第三方插件了，切記如果第三方插件你需要平凡更新的話，就不要用該方法，該處以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',
    },
  ],
}),

圖片資源壓縮

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

安裝依賴：

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

打包壓縮

這我想就不用多說了，基本上大家都會(huì)配置。

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

總結(jié)

以上的幾種方法是打包優(yōu)化的基本方法，大家可以根據(jù)各自的需要進(jìn)行配置以及增加其他的打包優(yōu)化等問題。更多相關(guān)vite打包優(yōu)化CDN壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: