如何优化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生命周期的深入理解
Dec 03 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 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
PHP新手上路(十三)
2006/10/09 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python爬取读者并制作成PDF
2015/03/10 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
详解python中的模块及包导入
2019/08/30 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
投资申请报告
2015/05/19 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript