vite构建打包性能优化

目录

1、清除console和debugger

二、gzip静态资源压缩

第一步:客户端打包开启

第二步:部署服务端开启

三、 静态文件按类型分包

四、超大静态资源拆分(代码分割)

第一种:提高静态资源的容量大小

第二种:合并路由打包

第三种:最小拆分打包

五、打包分析插件

六、组件按需导入

七、图片资源压缩

八、CDN加速 


我的博客原文:https://code-nav.top/article/1071

最近在用Vite4+Typescript+Vue3.2+SSR重构我的博客,由于项目内容较多,所以遇到了一些性能问题,所以在构建生产环境时做了一些优化,在这里做一个记录,方便大家参考。

1、清除console和debugger

安装 terser插件

npm install  terser  -D

 build里添加terserOptions配置

// 打包环境移除console.log,debugger
terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true
  }
},

二、gzip静态资源压缩

第一步:客户端打包开启

首先下载 vite-plugin-compression

npm i vite-plugin-compression -D

在vite.config.ts中引入

// 引入
import viteCompression from 'vite-plugin-compression'

//在plugins配置数组里添加gzip插件
viteCompression({
  verbose: true, // 默认即可
  disable: false, // 开启压缩(不禁用),默认即可
  deleteOriginFile: false, // 删除源文件
  threshold: 5120, // 压缩前最小文件大小
  algorithm: 'gzip', // 压缩算法
  ext: '.gz' // 文件类型
})

打包出的效果图: 

第二步:部署服务端开启

  nginx中添加压缩配置

    # 开启或者关闭gzip模块(on|off)
    gzip on;
    # 允许压缩的页面最小字节数, 默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大
    gzip_min_length 1k; 
    # 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。例如 4 4k 代表以4k为单位,按照原始数据大小以4k为单位的4倍申请内存。
    gzip_buffers 4 16k; 
    # 识别http的协议版本。由于早期的一些浏览器或者http客户端,可能不支持gzip自解压,用户就会看到乱码,所以做一些判断还是有必要的。
    #gzip_http_version 1.0;
    # gzip压缩比,1 压缩比最小处理速度最快,9 压缩比最大但处理最慢(传输快但比较消耗cpu)。
    gzip_comp_level 2;
    # 匹配MIME类型进行压缩,(无论是否指定)"text/html"类型总是会被压缩的。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 和http头有关系,加个vary头,给代理服务器用的
    gzip_vary off;
    # 表示IE6及以下禁止压缩
    gzip_disable "MSIE [1-6]\.";

三、 静态文件按类型分包

  build中添加如下代码:

build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      }
    }
  }

四、超大静态资源拆分(代码分割)

第一种:提高静态资源的容量大小
build: {
 chunkSizeWarningLimit: 1500,
}
第二种:合并路由打包

  build里的output设置内,添加以下代码

manualChunks: {
  // vue vue-router合并打包
  vue: ['vue', 'vue-router'],
  lodash: ['lodash'],
  // 两个文件合并成一个a文件
  helloWorld: ['src/components/a.vue','src/components/b.vue'],
}
第三种:最小拆分打包
// 插件打包做处理
manualChunks(id) {
  if (id.includes('node_modules')) {
    return id.toString().split('node_modules/')[1].split('/')[0].toString();
  }
  return;
}

五、打包分析插件

Rollup Plugin Visualizer,这是一个依赖分析插件,它提供了多种模式的依赖分析,包括直观的视图分析,sunburst(循环层次图,像光谱)、treemap(矩形层次图,看起来比较直观,也是默认参数)、network(网格图,查看包含关系)、raw-data(原数据模式,json格式), list(列表模式),你可以选择任意一种你喜欢的观察模式。

安装rollup-plugin-visualizer插件

npm i rollup-plugin-visualizer

在vite.config.ts中引入并配置

// 引入
import { visualizer } from 'rollup-plugin-visualizer';

// 在plugins配置数组里添加
visualizer({
  open:true, // 注意这里要设置为true,否则无效,如果存在本地服务端口,将在打包后自动展示
  gzipSize:true,
  file: "stats.html", //分析图生成的文件名
  brotliSize:true
}),

将在打包后自动展示,效果图:

六、组件按需导入

安装unplugin-vue-components插件

npm i unplugin-vue-components -D

在vite.config.ts中引入并配置

import Components from 'unplugin-vue-components/vite'
// ui库解析器,也可以自定义,需要安装相关UI库,unplugin-vue-components/resolvers
// 提供了以下集中解析器,使用的时候,需要安装对应的UI库,这里以element为示例
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 目标文件夹
      extensions: ['vue','jsx'], // 文件类型
      dts: 'src/components.d.ts', // 输出文件,里面都是一些import的组件键值对
      // ui库解析器,也可以自定义,需要安装相关UI库
      resolvers: [
        ElementPlusResolver(),
      ],
    })
  ]
})

注意:部分同学这个插件下载失败,可以试试以下方案:

npm i vite-plugin-imagemin --ignore-scripts

实在无法下载依赖包的,需要的话找博主私发你,可以部署到自己的npm上。

如何部署npm看我另一篇文章:https://code-nav.top/article/1014

七、 图片资源压缩

安装 vite-plugin-imagemin插件

npm i vite-plugin-imagemin -D

 在vite.config.js里面配置

// 引入
import viteImagemin from 'vite-plugin-imagemin'

// 在plugins配置数组里添加
plugin: [
    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
          }
        ]
      }
    })
]

八、CDN加速 

内容分发网络(Content Delivery Network,简称 CDN)就是让用户从最近的服务器请求资源,提升网络请求的响应速度。通常我们请求依赖模块使用 CDN ,而请求项目代码依然使用自己的服务器。还是以 lodash 为例:

安装插件 vite-plugin-cdn-import

npm install vite-plugin-cdn-import --save-dev

 在vite.config.js里面配置

import { autoComplete, Plugin as importToCDN } from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [
     importToCDN({
      // 需要 CDN 加速的模块
      modules: [
        // 支持自动导入
        autoComplete('axios'),
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    })
  ]
})

 配置完成后,打包自动会在index.html中引入script资源,如下图:

自动导入CDN的功能(autoComplete),有很多常用的依赖不需要自己再找(如vue、reac、antd、axios等),autoComplete功能可以在文档中查找使用。

支持自动完成的模块:

 

注意:自动完成记得在main.ts中引入模块

 在main.ts引入对应模块然后挂载,注意名称要和你CDN加速的name名称相同,不然引不进来,一般不用怎么修改,只有遇到问题后再检查一下自己是不是忘记引入或者引入错误了。

CDN网站查看: https://cdnjs.com/

注意:build打包时候如果遇到报错importToCDN is not a function,这个错误应该和版本有关,将import importToCDN from 'vite-plugin-cdn-import'引入改成import { Plugin as importToCDN } from 'vite-plugin-cdn-import'即可

完整的vite.config.ts 

import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import AutoImport from 'unplugin-auto-import/vite';
import WindiCSS from 'vite-plugin-windicss';
import viteCompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';
import { autoComplete, Plugin as importToCDN } from 'vite-plugin-cdn-import';
// 引入
import viteImagemin from 'vite-plugin-imagemin';
import Components from 'unplugin-vue-components/vite';
// ui库解析器,也可以自定义,需要安装相关UI库,unplugin-vue-components/resolvers
// 提供了以下集中解析器,使用的时候,需要安装对应的UI库,这里以element为示例
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

const pathSrc = path.resolve(__dirname, 'src');
export default defineConfig({
  resolve: {
    alias: {
      '@/': `${pathSrc}/`
    }
  },
  plugins: [
    vueJsx(),
    WindiCSS(),
    vue(),
    visualizer(),
    viteCommonjs(),
    Components({
      dirs: ['src/components'], // 目标文件夹
      extensions: ['vue', 'jsx'], // 文件类型
      dts: 'src/components.d.ts', // 输出文件,里面都是一些import的组件键值对
      // ui库解析器,也可以自定义,需要安装相关UI库
      resolvers: [
        ElementPlusResolver()
      ]
    }),
    // 自动导入vue3的hooks
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router', 'vuex', '@vueuse/core'],
      // 生成路径
      dts: path.resolve(pathSrc, 'auto-imports.d.ts')
    }),
    // 自动导入组件
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ],
      dts: path.resolve(pathSrc, 'components.d.ts')
    }),
    viteCompression({
      // gzip静态资源压缩配置
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    }),
    importToCDN({
      // 需要 CDN 加速的模块
      modules: [
        autoComplete('axios'),
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    }),
    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
          }
        ]
      }
    })
  ],
  server: {
    watch: { usePolling: true },
    open: false,
    hmr: true,
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: '0.0.0.0',
    port: 8080,
    https: false,
    proxy: {
      '/api': {
        /* 目标代理服务器地址 */
        target: 'https://code-nav.top/',
        /* 允许跨域 */
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'JcCloudWeb',
    minify: 'terser',
    cssCodeSplit: true,
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      input: 'index.html',
      output: {
        // 静态资源打包做处理
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    terserOptions: {
      // 清除console和debugger
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

如果你的项目已经在用 Vite ,不妨试验一下以上方案,看看项目会不会变得更加丝滑。欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下博主会持续更新。。。。

我的线上博客:富朝阳的博客

往期回顾

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

  • 78
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
Vite打包并压缩图片的方法有多种。根据引用,每次打包都会走一遍图片压缩的流程,所以在每次改动很小时,运行npm run build可能会导致需要长时间等待。根据引用[2],可以在打包前运行脚本npm run build:img进行图片压缩,将压缩后的图片记录下来,并记录时间戳。在二次打包时,只需要比较时间戳,如果图片没有改动,则可以跳过图片压缩的过程,从而减少打包时间。另外,根据引用,你还可以使用vite-plugin-imagemin插件来进行图片压缩。 所以,如果你想在Vite中进行图片压缩,你可以选择以下方法之一: 1. 每次改动很小时,直接运行npm run build进行图片压缩; 2. 在打包前运行脚本npm run build:img进行图片压缩,并记录压缩后的图片和时间戳,以便在二次打包时进行比较; 3. 安装vite-plugin-imagemin插件,并按照其文档进行配置和使用,以实现自动的图片压缩。 请根据你的具体需求选择适合的方法来进行Vite打包压缩图片。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vite图片压缩(vite-plugin-imagemin) imagemin error: XXXX解决办法](https://blog.csdn.net/qq_43806604/article/details/124732352)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

富朝阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值