vue打包文件太大导致加载时间太久,开启gzip减少文件体积

最新推荐文章于 2025-05-07 17:18:14 发布

原创

最新推荐文章于 2025-05-07 17:18:14 发布 · 672 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何通过启用gzip压缩来解决Vue项目打包文件过大问题，从而缩短加载时间。步骤包括安装依赖、在vue.config.js中配置、执行npm run build进行打包，以及说明前端代码压缩后仍需服务端如nginx的配置才能完全生效。

第一步:安装依赖:

npm i compression-webpack-plugin -D

第二步:在vue.config.js中配置:


const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
   
   
  publicPath:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qianduan1020

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程

qq_38287682的博客

09-23

6752

通过对打包之后的文件大小进行分析,发现其中three.js,echarts等模块占用空间比较大，同时我对代码进行了排查，发现对这两个模块都是进行的全部引入，但是实际上很多东西都没有使用，于是我对这些模块进行删减，改为部分引入，从而减少包文件的大小，同时将一些没有使用的模块进行删除，从而优化整体包文件的大小。经过以上配置之后，你会发现打包之后的dist/js文件夹里面出现了一些.gz格式的文件，这个就是拆解压缩之后文件包，他们文件都比较小，之后我们还需要nginx的配置文件进行配置，配置代码如下。

完美解决 vue webpack 单页面加载慢 gzip 访问 vendor.js 打包文件过大问题

qq_19767623的博客

10-19

9095

步骤一 vue-cli开启打包压缩和后台配合 gzip访问 1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true 2. 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是： npm install --save-dev compres...

参与评论您还未登录，请先登录后发表或查看评论

使用vue打包时vendor文件过大或者是app.js文件很大的问题

12-09

第一次使用vue2.0开发，之前都是用的angular1.x。在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。我的解决办法： 1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样：然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter',

压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)

11-21

问题由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似路由懒加载、按需加载的问题，所以呢，也算是没经验。到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。优化前： app.js 2.3MB vendor.js 2.4MB vendor.css 612kB app.js.map 9.13MB vendor.js.map 16.21MB //不一一列举.... 优化接下来看看优化方法。优化步骤1：不生成.map文件在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：

vue打包之后文件过大

weixin_38673922的博客

08-03

466

一、vue路由懒加载二、取消生成map文件，找到config/index.js ，修改为false 三、在index.html中，通过cdn引入库文件四、按需引入

Vue打包导致 JS 很大的问题解决【完美解决】

weixin_1095的博客

05-07

1300

这个问题困扰我很久了，一直没有解决。最后只好把 js 放到七牛云上面cdn，没想到，这样直接导致，流量访问超出，达到了百分之600，然后被通知欠费。这才痛下决心一定要解决这个问题。阅读下面的文章，一定会给你带来帮助，你所遇到的问题我基本都遇到了。

Vue 项目文件大小优化

追风2019

10-08

1792

本文介绍了Vue项目文件大小优化的方法。首先，优化的前提是可衡量，即需要了解项目当前的资源加载大小。优化步骤包括测量打包文件大小、完成测量和根据结果进行针对性优化。文章推荐了Vue3 + Vite环境下的测量工具，如vite-plugin-compression和rollup-plugin-visualizer插件。通过安装这些插件并配置vite.config.js，可以自动打开可视化报告，查看文件在gzip和brotli压缩后的大小，从而进行有效的文件大小优化。

Vue首屏加载过慢出现长时间白屏

qq_27824793的博客

11-25

1972

前言：本人第一次尝试写博客，如文章讲述不对的地方还望大家指出，多多包含，不胜感激！！需求场景：公司业务展示官网开发，构建版本后在外网测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。问题攻克解决步骤如下： 1. 采用懒加载的方式（官网有所提及，这里就不做详细描述） 2. webpack开启gzip压缩文件传输模式：　　- gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、

解决Vue项目打包后文件过大问题

热门推荐

weixin_39964419的博客

10-11

1万+

首屏加载时间优化

Vue打包文件过大

小生鲜

08-13

260

关于Vue项目打包完之后文件过大看了很多博客，觉得这篇写的不错，也很全面 VUE CLI3项目优化

vue项目如何优化加载速度，项目打包后文件过大怎么办？_vue启动项目文件多

2401_84447233的博客

04-27

735

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。它会生成一个分析图，你的文件里包含了哪些文件，打包后，它会自动在浏览器中打开。以 Vue 为例，我整理了如下的面试题。

vue项目打包优化，解决首次加载时间太长的问题

weixin_44056717的博客

06-16

2242

vue项目打包优化，解决首次加载时间太长的问题

Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案

都已经是第二年的立春、又何必执着于、当年的盛夏呢？

03-06

3334

Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案

Vue项目打包文件过大（优化）

良_123的专栏

01-05

5395

问题 Vue项目打包文件过大，项目加载慢，前端可以做哪些优化？分析其实，这是项目的性能优化，一般在项目开始开发之前就应该考虑，但在实际开发中，开发之前会被忽略。解决方案如下一、懒加载什么叫懒加载？在需要的时候进行加载，随载随用。常见的有：路由、图片等。例子：官方路由懒加载 { path: "/timeAxis", name: "timeAxis", component: () => import ('@/views/xxx'), }

vue打包后js、css文件过多导致加载很慢

一条会流泪的鱼

06-14

7549

优化加载速度，减少服务器的压力

vue 打包过大处理

qq_39339339的博客

09-19

4464

利用vue-cli生成的项目经过优化最终打包结果：标题各个文件大小文件大小分析各个文件都不是很大了！下面总结一下自己的打包优化心得： 1.像Vue 、element-ui 、vue-router 、vuex 、babel-polyfill 这些都不用打包，打包后很大的，可以引用cdn  <link ...

vue打包.json文件过大导致加载速度比较慢怎么解决

最新发布

08-22

### 优化 Vue 项目中 JSON 文件过大导致的打包加载速度慢问题在 Vue 项目中，若引入了较大的 JSON 文件，这些文件会被打包进 JavaScript 文件中，导致主包体积增大，从而影响首次加载速度。为了解决这一问题，可以从以下几个方面进行优化。 #### 1. 使用 Gzip 压缩减少传输体积通过 Gzip 压缩可以显著减少 JSON 文件的传输体积，从而加快加载速度。可以使用 `compression-webpack-plugin` 插件实现压缩，该插件支持对 `.json` 文件进行压缩。在 `vue.config.js` 中配置如下： ```javascript const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: (config) => { if (process.env.NODE_ENV !== 'production') return; config.plugins.push( new CompressionPlugin({ test: /\.(js|css|svg|woff|ttf|json|html)$/, threshold: 10240 }) ); } }; ``` 此配置仅在生产环境下启用 Gzip 压缩，对大于 10KB 的 JSON 文件进行压缩，有效减少文件体积，提升加载效率[^3]。 #### 2. 将 JSON 文件作为静态资源处理如果 JSON 文件不依赖于构建流程，可以将其放置在 `public` 目录下，并通过 HTTP 请求加载。例如： ```javascript fetch('/data/large-data.json') .then(response => response.json()) .then(data => { // 处理 JSON 数据 }); ``` 这种方式可以避免 JSON 文件被 Webpack 打包，而是作为静态资源直接部署在服务器上，从而减少构建时间和主包体积[^4]。 #### 3. 使用动态导入（Dynamic Import）按需加载 JSON 文件对于大型 JSON 文件，推荐使用动态导入的方式按需加载，避免在初始化时一次性加载所有数据。例如： ```javascript export default { data() { return { jsonData: null }; }, mounted() { import('../assets/data.json').then(data => { this.jsonData = data.default; }); } }; ``` 这种方式可以延迟加载 JSON 文件，直到组件挂载时才进行加载，从而提升首屏加载速度[^3]。 #### 4. 使用 CDN 分发 JSON 文件若 JSON 文件较大且不常更新，可考虑将其上传至 CDN 并通过 URL 引用。这样可以利用 CDN 的缓存机制和全球节点优势，提升访问速度。例如： ```javascript fetch('https://cdn.example.com/data/large-data.json') .then(response => response.json()) .then(data => { // 处理 JSON 数据 }); ``` 通过 CDN 分发，可以减少服务器负载，同时提升用户访问速度[^4]。 --- ###