Vite打包性能优化及填坑

最近在使用 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
      }
    }
  }
})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

LNMP 平台搭建（四十）

LNMP 平台搭建（四十）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 搭建LNMP 一、安装Nginx 二、安装Mysql 三、安装PHP 四、部署应用 前言 LNMP平台指的是将Linux、Nginx、MySQL和PHP&#xff08;或者其他的编程语言&#xff0c;如…
阅读更多...
成都智慧企业发展研究院总经理郑小华：践行双轮驱动，为能源电力数智化注入新活力丨数据猿专访...

成都智慧企业发展研究院总经理郑小华：践行双轮驱动，为能源电力数智化注入新活力丨数据猿专访...

大数据产业创新服务媒体 ——聚焦数据 改变商业 随着全球经济走向数字化&#xff0c;中国正处于这一浪潮的前沿&#xff0c;进行前所未有的技术与产业深度融合。政府在2023年2月印发的《数字中国建设整体布局规划》等政策下&#xff0c;明确展示了对数字经济的支持与鼓励&…
阅读更多...
基于“R语言+遥感“水环境综合评价方法教程

基于“R语言+遥感“水环境综合评价方法教程

详情点击链接&#xff1a;基于"R语言遥感"水环境综合评价方法教程 一&#xff1a;R语言 1.1 R语言特点&#xff08;R语言&#xff09; 1.2 安装R&#xff08;R语言&#xff09; 1.3 安装RStudio&#xff08;R语言&#xff09; &#xff08;1&#xff09;下载地址…
阅读更多...
Android studio实现圆形进度条

Android studio实现圆形进度条

参考博客 效果图 MainActivity import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color; import android.os.Bundle; import android.widget.TextView;import java.util.Timer; import java.util.TimerTask;public class MainActivity extends App…
阅读更多...
rknn_toolkit以及rknpu环境搭建-rv1126

rknn_toolkit以及rknpu环境搭建-rv1126

rknn_toolkit安装------------------------------------------------------------------------------- 环境要求&#xff1a;ubutu18.04 建议使用docker镜像 安装docker 参考https://zhuanlan.zhihu.com/p/143156163 镜像地址 百度企业网盘-企业云盘-企业云存储解决方案-同…
阅读更多...
Vue3.0 新特性以及使用变更总结

Vue3.0 新特性以及使用变更总结

Vue3.0 在2020年9月正式发布了&#xff0c;也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发&#xff0c;这篇文章就是在使用后的一个总结&#xff0c; 包含Vue3新特性的使用以及一些用法上的变更。 图片.png 为什么要升级Vue3 使用Vue2.x的小伙伴都熟悉…
阅读更多...
【python爬虫】4.爬虫实操（菜品爬取）

【python爬虫】4.爬虫实操（菜品爬取）

文章目录 前言项目&#xff1a;解密吴氏私厨分析过程代码实现&#xff08;一&#xff09;获取与解析提取最小父级标签一组菜名、URL、食材写循环&#xff0c;存列表 代码实现&#xff08;二&#xff09;复习总结 前言 上一关&#xff0c;我们学习了用BeautifulSoup库解析数据和…
阅读更多...
【Linux】基础IO

【Linux】基础IO

目录 一、回顾C语言文件操作二、文件系统调用接口1. open2.write3.read 三、文件描述符四、重定向1.输出重定向2.输入重定向 五、dup2 一、回顾C语言文件操作 1 #include<stdio.h>2 #include<stdlib.h>3 4 #define LOG "log.txt"5 6 int main()7 {8 //…
阅读更多...
nacos闪退等环境问题解决

nacos闪退等环境问题解决

nacos闪退&#xff1a;通常是jdk环境变量配置有问题&#xff0c;nacos获取不到环境变量所以闪退。因为nacos的启动文件会获取JAVA_HOME&#xff0c;如果配置的不对&#xff0c;会直接闪退。如图所示&#xff0c;nacos启动文件最开始就是获取环境变量&#xff0c;获取不到就提示…
阅读更多...
7.Redis-list

7.Redis-list

list list常用命令lpushlrangelpushxrpushrpushxlpop / rpoplindexlinsertllenlremltrimlset 阻塞版本命令blpop/brpop 总结内部编码应用场景使用redis作为消息队列 redis中的 list 是一个双端队列, list 相当于是数组或者顺序表。list 并非是一个简单的数组&#xff0c;而是更…
阅读更多...
宠物赛道，用AI定制宠物头像搞钱项目教程

宠物赛道，用AI定制宠物头像搞钱项目教程

今天给大家介绍一个非常有趣&#xff0c;而粉丝价值又极高&#xff0c;用AI去定制宠物头像或合照的AI项目。 接触过宠物行业应该知道&#xff0c;获取1位铲屎官到私域&#xff0c;这类用户的价值是极高的&#xff0c;一个宠物粉&#xff0c;是连铲个屎都要花钱的&#xff0c;每…
阅读更多...
context.WithCancel()的使用

context.WithCancel()的使用

“ WithCancel可以将一个Context包装为cancelCtx,并提供一个取消函数,调用这个取消函数,可以Cancel对应的Context Go语言context包-cancelCtx[1] 疑问 context.WithCancel()取消机制的理解[2] 父母5s钟后出门&#xff0c;倒计时&#xff0c;父母在时要学习&#xff0c;父母一走…
阅读更多...
计算机视觉的应用12-卷积神经网络中图像特征提取的可视化研究，让大家理解特征提取的全过程

计算机视觉的应用12-卷积神经网络中图像特征提取的可视化研究，让大家理解特征提取的全过程

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用12-卷积神经网络中图像特征提取的可视化研究&#xff0c;让大家理解特征提取的全过程。 要理解卷积神经网络中图像特征提取的全过程&#xff0c;我们可以将其比喻为人脑对视觉信息的处理过程。就像…
阅读更多...
qt day

qt day

#include "widget.h" #include "ui_widget.h" void Widget::my_slot() {} Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);this->setWindowIcon(QIcon(":/wodepeizhenshi.png"));//設置窗口的…
阅读更多...
数据结构（Java实现）-二叉树（上）

数据结构（Java实现）-二叉树（上）

树型结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#xff0c;称为根结点&…
阅读更多...
docker高级（DockerFile解析）

docker高级（DockerFile解析）

1、构建三步骤 编写Dockerfile文件 docker build命令构建镜像 docker run依镜像运行容器实例 2、DockerFile构建过程解析 Dockerfile内容基础知识 1&#xff1a;每条保留字指令都必须为大写字母且后面要跟随至少一个参数 2&#xff1a;指令按照从上到下&#xff0c;顺序执行…
阅读更多...
编程题四大算法思想（二）——回溯法：N皇后问题、子集和问题、地图填色问题、迷宫问题

编程题四大算法思想（二）——回溯法：N皇后问题、子集和问题、地图填色问题、迷宫问题

文章目录 回溯法迷宫游戏 N皇后问题基本概念解空间4后问题的解空间 可行解和最优解回溯法回溯法术语回溯法的关键问题回溯法的基本思想4后问题的约束条件n后问题生成问题状态的基本方法 子集和问题一个朴素的求解方法回溯回溯法的剪枝技术 地图填色问题 回溯法 迷宫游戏 深度优…
阅读更多...
springcloud-gateway简述

springcloud-gateway简述

Spring Cloud Gateway 是一个用于构建 API 网关的项目&#xff0c;它是 Spring Cloud 生态系统中的一部分&#xff0c;旨在为微服务架构提供动态路由、负载均衡、安全性和监控等功能。 网关工程对应pom文件 <?xml version"1.0" encoding"UTF-8"?>…
阅读更多...
HTTP状态码504(Gateway Timeout)报错原因分析和解决办法

HTTP状态码504(Gateway Timeout)报错原因分析和解决办法

文章目录 504报错原因分析一、用户角度1. 代理服务器问题2. 网络问题 二、网站管理员角度1. 服务器负载过重2. 网关配置问题3. 目标服务器响应慢4. IIS/nginx/apache服务关闭5. 维护或故障6. 数据库的慢处理也会导致504 用户角度可以采取哪些措施解决504错误1. 刷新页面2. 检查…
阅读更多...
SQLI-labs-第一关

SQLI-labs-第一关

目录 知识点&#xff1a;单引号字符型注入 1、根据提示&#xff0c;为get注入&#xff0c;在url中输入内容​编辑 2、判断注入点 3、判断目前该表的字段数 4、判断回显位置 5、爆库名 6、爆表名 7、爆字段名 8、爆值 知识点&#xff1a;单引号字符型注入 思路&#xff1a;…
阅读更多...
最新文章

Copyright @ 2022~2023