如何优化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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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系统流量分析的程序
2006/10/09 PHP
用PHP+MySql编写聊天室
2006/10/09 PHP
php实现多城市切换特效
2015/08/09 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python pandas常用函数详解
2018/02/07 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
C#公司笔试题
2014/03/28 面试题
共产党员承诺书
2014/03/25 职场文书
节电标语大全
2014/06/23 职场文书
领导离职感言
2015/08/03 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python