如何优化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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
如何优化vue打包文件过大
Apr 13 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
zend framework中使用memcache的方法
2016/03/04 PHP
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
python中的列表推导浅析
2014/04/26 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
护士自荐信怎么写
2013/10/18 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
软件售后服务方案
2014/05/29 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年英语工作总结
2014/12/20 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python