Vue2 项目优化，压缩

Vue2项目的优化部署

最近才把博客项目部署到服务器上去（沾灰多年的服务器终于派上用场了0 W 0)，刚开始前端项目在build时就已经提示文件过大了，chunk-vendors文件上MB了，当时不以为然，继续打包发布，部署在nginx下，公网访问时发现慢得离谱，访问到页面渲染出来差不多得花个20几秒，不知道的还以为我网站出问题了（某种意义上确实有问题）。为此我还记录了下访问时长,优化前访问到渲染出界面大约是24.35s （要命）最终优化后只要6s ，毕竟我的服务器宽带只有1M（大家理解一下 0 A 0）
发个博客链接：www.cemcode.com
优化时所记录的响应时长：

第一次尝试优化是给服务器配置了gzip，但发现反而响应时间更长了，不知道是不是我哪里出错了，于是乎开始尝试取出大文件依赖，比如element-ui、vuex、echarts、vue-router、vue，但没有成功，各种报错，最后百度寻找资源，查看各种解决方案，最后找到一篇大佬的文章并尝试才得以解决，给个链接：http://www.zuo11.com/blog/2020/11/vue_cli_slow.html

这里给出我的实践过程：

先是实践了配置gzip，在nginx.conf文件里添加了该片段：
```
server {listen       80;server_name  www.cemcode.com;# 开启gzipgzip on;gzip_vary on;gzip_min_length 1000;gzip_comp_level 2;gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml image/jpeg image/gif image/png application/javascript;}
```
注意：是添加gzip那段，前面的server还有listen 80都是自带的不要复制进去，自己找到文件下的server把配置复制进去就行了。

但我这个配置对我的项目没有起到明显的效果，可能是比较小的原因。
由于给后端配置了gzip压缩没有明显效果，于是乎继续往下尝试，先是打包生成report,这个可以可视化build后的文件大小，可以清楚的分辨出打包后哪些依赖所占空间最大，可以根据这些大文件来针对性的优化，由于vue-cli3的原因，自带打包report的功能，所以在package.json里添加"report":"vue-cli-service build --report"就可以了：
```
 "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint",// 新增这行代码"report": "vue-cli-service build --report"},
```
然后打包运行就可在dist文件夹下看到report.html文件，打开即可看到各个依赖所占大小比例：可以很明显的看出echarts还有highlight还有element-ui所占空间比例最大，然后针对优化即可

先引入要优化依赖的外部cdn链接，我这里是3个：

<script crossorigin="anonymous" integrity="sha512-BNc7saQYlxCL10lykUYhFBcnzdKMnjx5fp5s5wPucDyZ7rKNwCoqJh1GwEAIhuePEK4WM9askJBRsu7ma0Rzvg==" src="https://lib.baomitu.com/highlight.js/11.5.0/highlight.min.js"></script><script crossorigin="anonymous" integrity="sha512-BNc7saQYlxCL10lykUYhFBcnzdKMnjx5fp5s5wPucDyZ7rKNwCoqJh1GwEAIhuePEK4WM9askJBRsu7ma0Rzvg==" src="https://lib.baomitu.com/highlight.js/11.5.0/highlight.min.js"></script><script crossorigin="anonymous" integrity="sha512-nqTZmDErnOZ3Ec4DdD0fLYqJfHPn1IwOyLKb/jxotnzxMrZISgzOqHLB2MhqWxpbclWJpODWyRQNmTgdTfAAxA==" src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.common.min.js"></script>

是在https://cdn.baomitu.com/上找的，其他的cdn平台有试过，有的慢，这个还行就用这个了。

修改vue.config.js

在vue.config.js里添加：

configureWebpack:{externals:{echarts: "echarts",highlight: "highlight"}
}

echarts优化，先是去除了main.js里echarts的所有引入，改为：
```
Vue.prototype.$echarts = window.echarts
```
highlight优化，一样的去除import，因为直接引入外部链接，会让变量放到全局window，所以代码有用到hljs的地方直接都window.hljs了，之前因为是引入的依赖，所以不用加window。

element-ui优化，很简单按需引入即可，有官方文档：https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru，

import {Pagination,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Tooltip,Form,FormItem,Tabs,TabPane,Tag,Alert,Icon,Progress,ColorPicker,PageHeader,Message,Radio,RadioButton,RadioGroup,Notification,Empty
} from 'element-ui';Vue.use(Pagination);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Tooltip);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Alert);
Vue.use(Radio)
Vue.use(RadioButton)
Vue.use(RadioGroup)
Vue.use(Icon);
Vue.use(Progress);
Vue.use(ColorPicker);
Vue.use(PageHeader);
// 不能使用use，不然进入页面会先默认弹出空的message 和 notifiction
Vue.component(Message.name,Message)
Vue.component(Notification.name,Notification)
Vue.use(Empty)

这个法子感觉有点笨，有好的解决办法希望有大佬可以联系我。

然后直接运行指令：npm run report即可，最后打开report.html可以看到大小减少了许多：
提交到服务器运行就可以了，（0 W 0）

Vue2 项目优化，压缩相关推荐

老司机谈APK瘦身套路-项目优化篇
老司机谈APK瘦身套路-项目优化篇在上一篇文章中,老司机带领大家一起学习了图片资源的瘦身套路,收到了很多中学生读者的好评. 想了解的童鞋请点击:blog.csdn.net/mynameishua- ...
Vue-cli 项目优化归纳(打包、源码、用户体验)
前言:vue-cli项目开发打包部署后,存在问题有首次首页加载过慢,包括加载缓慢问题,需要进行vue项目优化.下面是对vue性能优化方法进行归纳,后面会对方法进行亲测. 主要包括:代码包打包优化.编码 ...
ElementUI项目优化上线
文章目录介绍项目优化 1. 生成打包报告 2. 通过 vue.config.js 修改 webpack 的默认配置 3. 为开发模式与发布模式指定不同的打包入口 4. configureWebpa ...
Java开发技术大杂烩(三）之电商项目优化、rabbitmq、Git、OSI、VIM、Intellj IDEA、HTTP、JS、Java...
前言最近公司让我维护Spring+Servlet+Hibernate+Spring Security+Jsp的老项目,正好可以锻炼我的业务逻辑和掌控项目的能力.虽然项目很老,但是其中还是有很多值我学 ...
【uni-app】uniapp项目优化方式及建议
uniapp项目优化方式及建议介绍:性能优化自古以来就是重中之重,关于uniapp项目优化方式最全整理,会根据开发情况进行补充 1.复杂页面数据区域封装成组件场景: 例如项目里包含类似论坛页面:点 ...
使用 Vue3 重构 Vue2 项目(长文)
前言 2020年9月18日,vue3正式版发布了,前几天把文档整体读了一遍,感触很深,可以解决我项目中的一些痛点,于是就决定重构之前那个vue2的开源项目. 本篇文章就记录下重构vue2项目的过程,欢 ...
深入浅出聊Unity3D项目优化：从Draw Calls到GC （难度2 推荐5）
原文出处: 慕容小匹夫的博客(@慕容小匹夫) 前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实, ...
【前端优化 Vue项目优化】如何避免浏览器卡顿，实现性能优化cdn？
提示:前端查漏补缺,仅代表个人观点. 文章目录一.前言二.前端优化方法 1. 减少请求,压缩文件 2. CSS和JavaScript管理 3. 设置内容缓存 4. 减少页面重定向 5. CDN网络 ...
vue2 项目接入 vite2 参考指南
本文整理 vue2 项目接入 vite2 需要注意的事项. 基本配置首先我们需要在项目中安装 vite:其次,要支持 vue2 还需要安装 vite-plugin-vue2. npm install ...

Vue2 项目优化，压缩

Vue2项目的优化部署

注意：是添加gzip那段，前面的server还有listen 80都是自带的不要复制进去，自己找到文件下的server把配置复制进去就行了。

Vue2 项目优化，压缩相关推荐

最新文章

热门文章