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

这里给出我的实践过程：

1. 先是实践了配置gzip，在nginx.conf文件里添加了该片段：

   server {
           listen       80;
           server_name  www.cemcode.com;
   		# 开启gzip
   		gzip 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把配置复制进去就行了。

   但我这个配置对我的项目没有起到明显的效果，可能是比较小的原因。

2. 由于给后端配置了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所占空间比例最大，然后针对优化即可

3. 先引入要优化依赖的外部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平台有试过，有的慢，这个还行就用这个了。

4. 修改vue.config.js

   在vue.config.js里添加：

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

5. echarts优化，先是去除了main.js里echarts的所有引入，改为：

   Vue.prototype.$echarts = window.echarts
   

6. highlight优化，一样的去除import，因为直接引入外部链接，会让变量放到全局window，所以代码有用到hljs的地方直接都window.hljs了，之前因为是引入的依赖，所以不用加window。

7. 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)
   

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

8. 然后直接运行指令：npm run report即可，最后打开report.html可以看到大小减少了许多：

9. 提交到服务器运行就可以了，（0 W 0）