Vite打包性能优化及填坑

news2024/9/24 21:18:31

最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面)

上面是dist文件夹的截图，里面的内容已经有30mb了，是时候该做点什么了。

分析

想要实现优化，首先我得先知道，是什么占了这么大的空间。是图片？是库？还是其他静态资源？

  1. 将文件分门别类，js，css这些资源目录分别打包到对应的文件夹下

    js
复制代码build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
        entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
        assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
      }
    }
}

  2. 查看项目的依赖，找出大块头

rollup-plugin-visualizer是一个打包体积分析插件，对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个stats.html。

bash
复制代码npm i rollup-plugin-visualizer -D
js
复制代码import { visualizer } from 'rollup-plugin-visualizer'
js
复制代码plugins: [
    visualizer({open: true})
]
arduino
复制代码npm run build // 打包结束后会出现下图

 

从体积能看到，这里已经达到了7MB大小了，是时候该做点什么了。

优化

拆分包

这里有一个自己的个人见解：如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中，减少http请求，如果不同模块使用不同插件明显，那就分成不同模块打包。这是一个矛盾体。这里使用的是最小化拆分包。如果是前者可以直接选择返回'vendor'。

scss
复制代码rollupOptions: {
  output: {
    manualChunks(id) {
      if (id.includes("node_modules")) {
        // 让每个插件都打包成独立的文件
        return id .toString() .split("node_modules/")[1] .split("/")[0] .toString(); 
      }
    }
  }
}

去除debugger

bash
复制代码npm i terser -D
js
复制代码terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true
  }
}

CDN 加速

内容分发网络（Content Delivery Network，简称 CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。同时减少应用打包出来的包体积，利用浏览器缓存，不会变动的文件长期缓存。(不建议使用第三方cdn，这里做学习讨论使用)

bash
复制代码npm i rollup-plugin-external-globals -D
npm i vite-plugin-html -D
html
复制代码<head>
    <%- vuescript %>
</head>
css
复制代码import { createHtmlPlugin } from 'vite-plugin-html'

rollupOptions: {
  // 告诉打包工具 在external配置的 都是外部依赖项  不需要打包
  external: ['vue'],
  plugins: [
    externalGlobals({
      // "在项目中引入的变量名称"："CDN包导出的名称，一般在CDN包中都是可见的"
      vue: 'Vue'
    })
  ]
}

plugins: [
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          vuescript: '<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>'
        }
      }
    })
]

 

按需导入

仔细看上面那张图右下部分的模块，不知道你会不会感觉到奇怪，明明是同一个包，为什么既出现了lodash又出现了lodash-es。其实lodash-es 是 lodash 的 es modules 版本 ，是着具备 ES6 模块化的版本，体积小，而lodash是common.js版本。lodash最大的缺陷就是无法按需导入。

js
复制代码import _ from 'lodash-es'; // 你将会把整个lodash的库引入到项目
import { cloneDeep } from 'lodash-es'; // 你将会把引入cloneDeep引入到项目

项目中用到lodash的地方也不多，经过手动修改一下，看现在已经看不到lodash的库了。

文件压缩

复制代码npm install vite-plugin-compression -D
js
复制代码// build.rollupOptions.plugins[]
viteCompression({
  verbose: true, // 是否在控制台中输出压缩结果
  disable: false,
  threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
  algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
  ext: '.gz',
  deleteOriginFile: true // 源文件压缩后是否删除(我为了看压缩后的效果，先选择了true)
})

当请求静态资源时，服务端发现请求资源为gzip的格式时，应该设置响应头 content-encoding: gzip 。因为浏览器解压也需要时间，所以代码体积不是很大的话不建议使用 gzip 压缩。

图片压缩

bash
复制代码yarn add vite-plugin-imagemin -D

or

bash
复制代码npm i vite-plugin-imagemin -D
js
复制代码import viteImagemin from 'vite-plugin-imagemin'

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

viteImagemin在国内比较难安装，容易出现报错，可以尝试一下下面几种解决方案。

viteImagemin报错

  1. 使用 yarn 在 package.json 内配置(推荐) "resolutions": { "bin-wrapper": "npm:bin-wrapper-china" }

  2. 使用 npm,在电脑 host 文件加上如下配置即可 199.232.4.133 raw.githubusercontent.com

  3. 使用 cnpm 安装(不推荐)

填坑

坑1

在优化过程中发现有什么rollupOption不生效，请检查vite版本。上述配置在vite4.0版本生效，如需升级，请前往官方迁移文档。

坑2

Uncaught TypeError: Failed to resolve module specifier "Vue". Relative references must start with either "/", "./", or "../".

图片

这里有可能是 vue-demi 引入了 vue，然而 rollup-plugin-external-globals 插件配置全局变量时不会处理 node_modules 下的依赖项，导致 vue-demi 还是通过 import 的方式与 node_modules 下的 vue 进行关联，而没有使用全局变量下的 vue，打包后 vue 已变成外部依赖项，vue-demi 自然无法找到 vue，所以就报错了。

而vue-demi是哪里来的呢，我的项目是由于element-plus引用了vue-demi，所以此时解决方案就是将vue-demi也用cdn引入。

总结

到了这一步，整个文件夹已经完全瘦身了。从一开始的30MB到现在的11.8MB了。我们在项目里面放置了许多json数据(因为业务原因不能上传到服务器)，json数据已经占了差不多5、6mb的原因，所以是一个单纯的项目并没有这么大。

 

 

配置

js
复制代码// vite.config.js
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import viteImagemin from 'vite-plugin-imagemin'
import externalGlobals from 'rollup-plugin-external-globals'
import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    visualizer({ open: true }),
    // 将下面的添加到plugin下
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          vuescript: '<script src="https://cdn.jsdelivr.net/npm/vue@3.2.25"></script>',
          demiScript: '<script src="//cdn.jsdelivr.net/npm/vue-demi@0.13.7"></script>',
          elementPlusScript: `
            <link href="https://cdn.jsdelivr.net/npm/element-plus@2.2.22/dist/index.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/element-plus@2.2.22/dist/index.full.min.js"></script>
          `,
          echartsSciprt: '<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>'
        }
      }
    }),
    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
          }
        ]
      }
    })
  ],
  build: {
    target: 'es2020',
    minify: 'terser',
    // rollup 配置
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
        entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
        assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      },
      //  告诉打包工具 在external配置的 都是外部依赖项  不需要打包
      external: ['vue', 'element-plus', 'echarts'],
      plugins: [
        externalGlobals({
          vue: 'Vue',
          'element-plus': 'ElementPlus',
          echarts: 'echarts',
          'vue-demi': 'VueDemi'
        }),
        viteCompression({
          verbose: true, // 是否在控制台中输出压缩结果
          disable: false,
          threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
          algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
          ext: '.gz',
          deleteOriginFile: false // 源文件压缩后是否删除
        })
      ]
    },
    terserOptions: {
      compress: {
        // 生产环境时移除console
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/958226.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

开学季ipad手写笔什么牌子好？第三方电容笔推荐

开学季ipad手写笔什么牌子好？第三方电容笔推荐

自从ipad之类的平板电脑上出现了电容笔&#xff0c;电容笔就成功的取代了我们的手指&#xff0c;大大加快了我们的写作速度。不过&#xff0c;由于苹果pencil自带的先进芯片&#xff0c;导致其售价一直很高&#xff0c;给很多人&#xff0c;特别是学生&#xff0c;造成了很大的…
阅读更多...
Python（Web时代）—— Django操作现有数据库表

Python（Web时代）—— Django操作现有数据库表

Mysql操作 前言 在实际开发过程中&#xff0c;我们经常会遇到数据库表已经建立好了&#xff0c;现在只需要开发项目功能&#xff0c;操作已有数据库表的情况。 Django为我们提供了inspecdb的方法。他的作用即是对已经存在的数据库表来反向映射结构到models.py中. 操作 第一…
阅读更多...
web-Tomcat

web-Tomcat

阅读更多...
前端监听SDK（上报埋点数据）

前端监听SDK（上报埋点数据）

1、使用方式 <head><script>window.pineapple || (pineapple {});pineapple.param {"src": "http://127.0.0.1:3001/pa.gif","token": "dsadasd2323dsad23dsada",};</script><script src"js/pineapple.j…
阅读更多...
sql各种注入案例

sql各种注入案例

目录 1.报错注入七大常用函数 1)ST_LatFromGeoHash (mysql>5.7.x) 2)ST_LongFromGeoHash &#xff08;mysql>5.7.x&#xff09; 3)GTID (MySQL > 5.6.X - 显错<200) 3.1 GTID 3.2 函数详解 3.3 注入过程( payload ) 4)ST_Pointfromgeohash (mysql>5.…
阅读更多...
如何截取视频中的一段视频？分享几种视频分割方法

如何截取视频中的一段视频？分享几种视频分割方法

当处理长视频时&#xff0c;视频分割可以使您更加高效。如果您只需要处理其中的一部分&#xff0c;而不是整个视频&#xff0c;那么分割视频可以使您更容易找到需要处理的部分。而且&#xff0c;分割视频还可以使您更容易在不同的项目之间重复使用视频片段。教大家几种简单的视…
阅读更多...
前端面试中Vue的有经典面试题一

前端面试中Vue的有经典面试题一

1. 谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。 Model&#xff1a;代表数据模型&#xff0c;数据和业务逻辑都在Model层中定义&#xff1b; View&#xff1a;代表UI视图&#xff0c;负责数据的展示&#xff1b; ViewModel&#xff1a;负责监听Model中…
阅读更多...
Argument of type {****} is not assignable to parameter of type ‘never‘.ts(2345)

Argument of type {****} is not assignable to parameter of type ‘never‘.ts(2345)

在日常开发中配置eslintTypescript之后&#xff0c;会出先各种校验报错提示&#xff0c;今天在开发过程中遇到ts2345报错&#xff0c;出错场景发生在数组push一个Object对象报错。 const obj { title: , children: [] }; const currentObj obj.children; 其实就是obj.chilr…
阅读更多...
C语言每日一练---Day(14)

C语言每日一练---Day(14)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;统计每个月兔子的总数 数列的和 &#x1f493;博主csdn个人主页&#x…
阅读更多...
链表模拟栈

链表模拟栈

定义节点 class Node {var num: Int _var next: Node _def this(num: Int) {thisthis.num num}override def toString: String s"num[${this.num}]" }定义方法 class LinkStack {private var head new Node(0)def getHead: Node head//判断是否为空def isEmp…
阅读更多...
每日一题 1110删点成林

每日一题 1110删点成林

题目 给出二叉树的根节点 root&#xff0c;树上每个节点都有一个不同的值。 如果节点值在 to_delete 中出现&#xff0c;我们就把该节点从树上删去&#xff0c;最后得到一个森林&#xff08;一些不相交的树构成的集合&#xff09;。 返回森林中的每棵树。你可以按任意顺序组…
阅读更多...
Pandas+Pyecharts | 2023软科中国大学排名分析可视化

Pandas+Pyecharts | 2023软科中国大学排名分析可视化

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 数据信息 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 2023中国大学综合排名TOP303.2 2023中国大学各类型占比3.3 2023中国各省地区大学…
阅读更多...
Redis 复制(replica)

Redis 复制(replica)

1. 是什么 1.1 官网地址 https://redis.io/docs/management/replication/ 1.2 一句话 1. 就是主从复制&#xff0c;master以写为主&#xff0c;slave以读为主 2. 当master数据变化的时候&#xff0c;自动将新的数据异步同步到其它slave数据库 2. 能干嘛 1. 读写分离 2. 容灾…
阅读更多...
准备HarmonyOS开发环境

准备HarmonyOS开发环境

引言 在开始 HarmonyOS 开发之前&#xff0c;需要准备好开发环境。本章将详细指导你如何安装 HarmonyOS SDK、配置开发环境、创建 HarmonyOS 项目。 目录 安装 HarmonyOS SDK 配置开发环境 创建 HarmonyOS 项目 总结 1. 安装 HarmonyOS SDK HarmonyOS SDK 是开发 Harmo…
阅读更多...
共享办公空间的SWOT分析：

共享办公空间的SWOT分析：

S&#xff08;优势&#xff09;&#xff1a; 灵活性和多样性&#xff1a;共享办公空间通常提供多种套餐和服务&#xff0c;适合不同需求和预算的初创企业和个人。 资源共享和合作&#xff1a;共享办公空间提供了与其他企业家、创新者和专业人士交流和合作的机会&#xff0c;可…
阅读更多...
为 LVGL 添加截图/截屏功能(lv_100ask_screenshot)

为 LVGL 添加截图/截屏功能(lv_100ask_screenshot)

本文内容选自百问网&#xff0c;完整的演示视频观看&#xff1a; https://www.bilibili.com/video/BV18r4y1X7MJ 前言 lv_100ask_screenshot 是一个基于 lvgl 的屏幕截图工具。 lv_100ask_screenshot 特性&#xff1a; 可以将LVGL的屏幕对象(全屏)保存为图片文件&#xff1…
阅读更多...
Deepnote:为什么我停止使用 Jupyter Notebook

Deepnote:为什么我停止使用 Jupyter Notebook

Jupyter 笔记本已经成为必不可少多年来用于众多数据科学工作流程的工具。其中包括执行数据挖掘、分析、处理、建模以及在每个数据科学项目的生命周期中执行的一般日常实验任务。 Jupyter（作者提供的图片） 尽管它很受欢迎，但许多数据科学家也指出了它的众多缺点，例如这里和
阅读更多...
ThingsKit物联网平台告警中心之告警联系人

ThingsKit物联网平台告警中心之告警联系人

告警联系人是指接收告警信息的人&#xff0c;产生告警后&#xff0c;会第一时间通知他。 新增 点击新增告警联系人按钮&#xff0c;填入相关信息&#xff0c;确认新增。 告警联系人参数参数说明联系人姓名 定义告警通知到的联系人名称必填支持输入的格式&#xff1a;中英文…
阅读更多...
【LeetCode】84.柱状图中最大的矩形

【LeetCode】84.柱状图中最大的矩形

题目 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释&#xff1a;最大的…
阅读更多...
如何理解attention中的Q、K、V？

如何理解attention中的Q、K、V？

y直接用torch实现一个SelfAttention来说一说&#xff1a; 1、首先定义三哥线性变换&#xff0c;query&#xff0c;key以及value&#xff1a; class BertSelfAttention(nn.Module):self.query nn.Linear(config.hidden_size, self.all_head_size)#输入768&#xff0c;输出768…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023