如何优化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在图片上传的时候压缩图片
Nov 18 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
zend framework多模块多布局配置
2011/02/26 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python中正则表达式的使用详解
2014/10/17 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python初步实现word2vec操作
2020/06/09 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
欢送退休感言
2014/02/08 职场文书
节约用水标语
2014/06/11 职场文书
2014年领班工作总结
2014/11/25 职场文书
布达拉宫导游词
2015/02/02 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
中秋节感想
2015/08/10 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS