【VUE】vue3+vite项目打包优化

原创 已于 2024-07-16 11:26:26 修改 · 8.3k 阅读 · 69 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

于 2023-11-29 08:30:00 首次发布
本文介绍了如何使用vue3和vite进行项目打包优化，包括安装rollup-plugin-visualizer来图形化文件大小，解决大文件问题，通过CDN引入第三方库，依赖分包以及使用vite-plugin-compression进行gzip压缩。通过这些步骤，显著减少了项目的体积和加载时间。

优化前预览

目前无任何处理，打包文件大小约为4M

在这里插入图片描述

一、先安装rollup-plugin-visualizer

在项目根目录安装rollup-plugin-visualizer，此插件能图形化文件大小，方便观察

npm i -D rollup-plugin-visualizer

安装完在vite.config.ts中进行配置

import { visualizer } from 'rollup-plugin-visualizer'

// defineConfig配置项
plugins: [
	visualizer({
        emitFile: false,
        filename: 'stats.html',
        open: true,
        sourcemap: true
      })
]

保存配置后打包一次就能看见文件夹大小分布
在这里插入图片描述

二、解决大文件

一眼看去发现 china.json占比最大，先解决它。
看代码发现开发时是静态文件引入，修改为接口获取

在这里插入图片描述
修改为 ↓
在这里插入图片描述
改好后重新打包，一下子就小了不少
在这里插入图片描述

三、CDN引入第三方库

之前发现除了最大的静态JSON文件，第三方库占用空间也是非常大，所以下一步就是解决它。
在此之前需要安装 vite-plugin-cdn-import ，此插件可以帮我们使用CDN方式引入第三方库，减小请求压力，同时也缩小项目体积

npm i -D vite-plugin-cdn-import

安装好后再vite.config.ts文件中进行配置

import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import" 
//放在 plugin 下
importToCDN({
        modules: [
          {
            name: "element-plus",
            var: "ElementPlus",
            path: "https://unpkg.com/element-plus@2.4.2",
            css: "https://unpkg.com/element-plus/dist/index.css"
          },
          autoComplete('axios'),
          autoComplete('vue'),
          autoComplete('moment'),
          autoComplete('lodash'),
          
          // {
          //   name: "vue",
          //   var: "Vue",
          //   path: "https://unpkg.com/vue@3.3.8"
          // },
          
          // {
          //   name: "moment",
          //   var:  "Moment",
          //   path: "https://unpkg.com/moment@2.29.4"
          // },
          // {
          //   name: "lodash",
          //   var:  "Lodash",
          //   path: "https://unpkg.com/lodash@4.17.21"
          // },
       
        ],
      }),

此处使用 autoComplete 可以自动帮助引入，目前只支持部分库，具体可以查看 vite-plugin-cdn-import配置文档， 其他函数不支持的需要自行配置path，推荐去 www.jsdelivr.com查找
举个栗子，假设我需要引入Element-plus，那么我可以搜索element-plus
在这里插入图片描述
点击进入

在这里插入图片描述
这里就有.js 以及配套的.css文件，将链接填入配置保存即可。
如果有版本需求 ，可以用unpkg.com/:package@:version/:file 方式引入，例如https://unpkg.com/vue@3.3.8

保存后再次打包
在这里插入图片描述
可以看到比上次小了近1M！

四、依赖分包

虽然咱们项目体积已经缩小了很多，但是可以从刚才打包后的文件里看出，存在个别文件相比其他的要大得多，这会导致依赖模块加载时变慢，所以我们下一步就是要将大包分开。

我们可以先去vite官网找到构建选项中的 build.rollupOptions ，vite其实是基于rollup为底层开发的，这里的配置更是可以直接参照rollup配置，这里我们配置部分选项,在vite.config.ts文件中添加以下配置项

	// defineConfig 下
	build: {
      rollupOptions: {
        output: {
          sourcemap: true,
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks(id){
            // id为文件的绝对路径 
            if(id.includes('node_modules')){
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          }
        }
      }
    }

保存后再次打包后可以看到之前的大文件已经被拆分开
在这里插入图片描述

五、gzip压缩

最后就是代码压缩了，依旧是安装插件vite-plugin-compression

npm i -D vite-plugin-compression

安装完再进行配置

import viteCompression from 'vite-plugin-compression'

plugin:[
	viteCompression({
        verbose: true,
        disable: false,
        threshold: 1024,
        algorithm: 'gzip',
        deleteOriginFile: true
      })
]

保存再次打包，看看效果咋样
在这里插入图片描述
这里好像没有啥效果，可能是因为之前的代码已经被压缩了，具体效果可能会有不同。

总结

这几套组合拳打过去，项目体积不小也难，配置过程需要注意配置项位置，有时候配置好了没有效果可以去插件文档里检查下是否放错了位置。

============================================================================

这里贴一下配置代码以及最后结果

import { UserConfigExport, ConfigEnv, loadEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import DefineOptions from 'unplugin-vue-define-options/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

import { visualizer } from 'rollup-plugin-visualizer'
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import"
import viteCompression from 'vite-plugin-compression'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  let env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
      VueSetupExtend(),
      DefineOptions(),
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      visualizer({
        emitFile: false,
        filename: 'stats.html',
        open: true,
        sourcemap: true
      }),
      importToCDN({
        modules: [
          autoComplete('axios'),
          autoComplete('vue'),
          autoComplete('moment'),
          autoComplete('lodash'),
          {
            name: "element-plus",
            var: "ElementPlus",
            path: "https://unpkg.com/element-plus@2.4.2",
            css: "https://unpkg.com/element-plus/dist/index.css"
          },
          {
            name: 'pinia',
            var: 'pinia',
            path: "https://unpkg.com/pinia@2.1.7"
          },
          {
            name: "echarts",
            var: "echarts",
            path: "https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"
          },
          {
            name: "vue-router",
            var: "vue-router",
            path: "https://cdn.jsdelivr.net/npm/vue-router@4.2.5/dist/vue-router.global.min.js"
          },
          {
            name: "echarts-liquidfill",
            var: "echarts-liquidfill",
            path: "https://cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"
          },
       
        ],
      }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 1024,
        algorithm: 'gzip',
        deleteOriginFile: true
      })
    ],
    resolve: {
      alias: {
        '@': path.resolve('./src'), // 相对路径别名
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/style/variable.scss";',
        },
      },
    },
    server: {
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_SERVE,
          // 需要代理跨域
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    build: {
      rollupOptions: {
        output: {
          // sourcemap: true,
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks(id){
            // id为文件的绝对路径 
            if(id.includes('node_modules')){
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          }
        }
      }
    }
  }
}

在这里插入图片描述

Vue3之Vite打包优化
njkl2166的博客
12-28 2388
1. 安装：2. 配置在vite.config.js中引入 rollup-plugin-visualizer插件3. 查看：包文件目录生成stats.html文件，打开stats.html文件，生成可视化代码分析报告。对于一些较大的第三方库，如 Element UI或 Ant Design，可以考虑按需引入组件或样式，而不是全部引入。按需引入组件或样式可以参考这些第三方库的官方文档，在里面有介绍如何按需引入组件或样式。
Vite -构建优化 - 分包策略 + 打包压缩
热门推荐
northcastle的博客
11-26 1万+
Vite 构建的优化配置 ： 分包策略 + 打包压缩
VUE3项目VITE打包优化
kjprime的博客
03-25 1171
我相信认真看完，还是有收获的，我自己全流程亲测，断断续续花费了我半个月时间，从设想到一步一步拆解实现，然后在生产环境启用，很有收获。文件压缩率高达90%左右 响应速率提升高达85%左右。
【免费下载】 Rollup Plugin Visualizer 使用教程
最新发布
gitblog_00626的博客
11-14 2233
Rollup Plugin Visualizer 是一个用于 Rollup 构建工具的插件，它可以生成可视化的构建报告，帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。通过这个插件，开发者可以在构建完成后生成一个交互式的 HTML 报告，其中包含了构建过程中的各种统计信息，如文件大小、依赖关系、模块数量等。 ## 项目快速启动 ### 安装 首先，你需要在你的项目中安装 `roll
Vite性能优化指南 ✅
YUYUYU972的博客
04-29 1330
所以我们的需求很简单：有没有办法让lodash被打包到一个单独的chunk中，后续浏览器只在第一次加载的时候请求这个chunk即可，后续都读缓存，以提高响应速度？，每一次更新我们修改的只是业务代码，lodash这些第三方包的代码我们肯定是不会改动的，但是每一次更新（甚至是每一次刷新）浏览器都得重新请求一次lodash的代码。一起被打包到同一个chunk中，且chunk的命名是通过哈希的方法来生成的，只要业务代码发生改动，那么chunk的命名几乎就会改变。组件相关的代码被抽离为一个单独的chunk。
vite 打包优化
俊刚的博客
01-17 3582
本文介绍了几种常见的打包优化技术和策略，包括代码压缩、文件合并、按需加载、懒加载等。通过对代码进行压缩和合并，可以减少打包文件的大小；通过按需加载和懒加载，可以提高应用程序的加载速度和性能。此外，还介绍了一些其他的打包优化技巧，如使用CDN加速、使用缓存等。这些技术和策略可以帮助开发者更好地优化自己的应用程序，提升用户体验。
vue3+vite3项目打包优化
DZQ1223的博客
09-20 3016
Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧！
vue3 + vite 项目打包优化
十三月的博客
05-29 2528
vue项目打包之后生成的dist包体积太大优化
精选资源
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
datav Vue3+TS+Vite版.zip
04-02
标题 "datav Vue3+TS+Vite版.zip" 暗示了这是一个基于Vue3、TypeScript（TS）和Vite构建的数据可视化项目。这个压缩包可能包含了用于开发数据展示应用的所有源代码和配置文件。让我们深入了解一下这些技术及其在项目...
精选资源
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3+vite 组件打包
04-16
Vue3 和 Vite 的组件打包是一项关键的前端开发任务，它涉及到现代Web应用程序的构建流程。Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和新特性，如Composition API，而 Vite 是由 Vue.js 作者尤雨溪开发的...
精选资源
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
Vite 从零到发布：完整配置与最佳实践指南
m0_62626838的博客
08-10 7317
Vite作为新一代前端构建工具，通过原生ESM模块和按需编译解决了传统工具Webpack的痛点，实现秒级启动和毫秒级热更新。本文详细介绍了Vite的完整发布流程、基础配置（包括base路径、环境变量设置）、开发优化（路径别名、代理配置）以及打包优化策略（压缩配置、分包策略）。同时还讲解了高级优化技巧，如CDN加速、图片压缩等。通过合理配置Vite，开发者可以显著提升项目开发效率和运行性能，同时降低配置复杂度。
Vue3之vite打包优化
qq_43225508的博客
06-26 7173
Vue3之vite打包优化
Vue3项目打包优化
valsedefleurs的博客
07-05 1270
Vue3项目打包优化
Vue3项目上线打包优化
kangaroo的博客
10-18 1602
Vue3项目上线打包优化，不定时更新。
Vue3打包优化-vite篇
weixin_43867229的博客
03-13 1800
浏览器缓存也称为HTTP缓存，HTTP缓存简单理解就是本地（浏览器）缓存了HTTP响应，以便后续复用，减少向服务端的请求。尤其对于一些静态资源，如图片、JS文件、CSS文件等资源，浏览器端缓存可以极大提升页面的加载速度，不用每次都都全部从服务端下载，也减轻了服务端的压力。在vite.config.js文件中，使用build.rollupOptions.output来配置分包规则。使用import.meta.glob或import.meta.globEager来动态导入模块。
vuecli3 配置优化vue.config.js
波~的博客
07-24 503
图片压缩 安装依赖：cnpm install image-webpack-loader --save-dev 代码压缩 安装依赖：cnpm i -D uglifyjs-webpack-plugin 开启Gzip 安装依赖：cnpm install --save-dev compression-webpack-plugin // 代码压缩 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // gzip压缩 const Compress
vue+vite项目打包配置
01-03
### Vue 和 Vite 项目的打包配置教程 #### 修改 `vite.config.js` 为了使 Vite 能够更好地处理 Vue 项目，在 `vite.config.js` 文件中需要做特定的调整。对于基于 TypeScript 的 Vue3 项目，可以引入 `@vitejs/plugin-vue` 插件来支持 `.vue` 单文件组件解析[^2]。 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue() ], }) ``` 如果是在使用 Vue2，则应采用对应的插件版本以确保兼容性： ```javascript // vite.config.js for Vue2 project import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue2' // 注意这里使用的是 plugin-vue2 export default defineConfig({ plugins: [ vue() ] }) ``` #### 配置别名路径 (`@/`) 提示 为了让开发者更方便地引用模块而不必关心相对路径问题，可以在开发环境中通过 `resolve.alias` 来设定别名路径。这不仅提高了代码可读性和维护效率，也减少了错误发生的可能性[^1]。 ```javascript import path from 'path'; import { defineConfig } from 'vite'; export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') } }, }); ``` #### 测试打包效果 完成上述配置之后，可以通过命令行工具执行构建操作并验证最终产物是否符合预期。通常情况下会运行如下指令来进行生产环境下的优化编译工作: ```bash npm run build ``` 此过程将会依据之前定义好的规则对整个应用进行压缩、混淆等一系列性能提升措施，并将结果放置于指定输出目录内供部署使用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值