如何优化vue打包文件过大


Posted in Vue.js onApril 13, 2022

vue打包生成的js文件过大优化

1.组件按需加载

现在大多的ui库都是以组件的形式进行处理,所以只需导入需要模块的即可

2.去掉生成map文件

打包时会生成map文件,而map文件一般都比较大,可以取消生成map文件

(1)config/index.js找到productionSourceMap把true改为false

3.cdn引入

通过外部引入的方式引入这些UI组件库,从而减少打包文件过大的问题

(1)index.html

引入外部文件,并且加上<router-view> 

如何优化vue打包文件过大

(2)main.js

去掉在页面引入vue和vue-router

如何优化vue打包文件过大

4.路由懒加载

如何优化vue打包文件过大

5.代码压缩

config/index.js 找到 productionGzip 把 false 改为 true

注意:要先安装compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

6.最后

优化前:

如何优化vue打包文件过大

优化后:

如何优化vue打包文件过大

项目打包之后js文件太大问题

问题描述

前端项目打包之后.js文件太大,导致项目第一次加载的时候太慢,查阅各种解决方案资料,汇总以下几点:

1.使用cdn引入不怎么改变的第三方库

类似于

<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>

webpack.base.conf.js 添加:

      externals: {
         'vue': 'Vue',
         'vue-router': 'VueRouter',
         'element-ui': 'ELEMENT',
         'echarts': 'echarts',
         'axios': 'axios'
      },

2.使用vue的懒加载

官网地址[https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]

但是官网有一句

如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

这个插件依赖于6.x.babel 需要注意

3.服务器和前端配置开启压缩

服务器nginx配置添加:

  gzip on;
  gzip_static on;  --这个很重要 不加的话 访问加载的还是未压缩的文件

前端配置config/index.js:

 productionGzip: true,

然后再引入插件 compression-webpack-plugin

需要注意版本  "compression-webpack-plugin": "^1.1.12",

前面两种 文件大小并没有减少太多 使用第三种的时候减少的最多。

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
vue数据字典取键值项目的字典问题
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
vue选项卡切换的实现案例
分享一个vue实现的记事本功能案例
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
You might like
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
jquery简单体验
2007/01/10 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
jQuery的框架介绍
2016/05/11 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Python 转换文本编码实现解析
2019/08/27 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
学生打架检讨书
2014/10/20 职场文书
2014年减负工作总结
2014/12/10 职场文书
海洋天堂观后感
2015/06/05 职场文书
实施意见格式范本
2015/06/05 职场文书
实践论读书笔记
2015/06/29 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
python字符串常规操作大全
2021/05/02 Python
Python基础 括号()[]{}的详解
2021/11/07 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL