如何优化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 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue项目支付功能代码详解
Feb 18 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
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
node.js实现端口转发
2016/04/14 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
在Python下尝试多线程编程
2015/04/28 Python
python如何重载模块实例解析
2018/01/25 Python
基于python操作ES实例详解
2019/11/16 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
用 Python 制作地球仪的方法
2020/04/24 Python
Python中logger日志模块详解
2020/08/04 Python
医院检讨书范文
2014/02/01 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
遗失说明具结保证书
2015/02/26 职场文书
硕士论文致谢范文
2015/05/14 职场文书
亮剑精神观后感
2015/06/05 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
python画条形图的具体代码
2022/04/20 Python
Mysql中常用的join连接方式
2022/05/11 MySQL