解决vue生产环境app.js文件过大问题

一、 效果

从3.7M降到了现在的105KB image.png

二、方案

1. 去掉多余的库
   将不必要的库卸载掉 npm uninstall xxx
   

   举个例子：例如moment库文件是很大的，在前端可以用js的 new Date实现获取日期，或者可以其他库代替，也可以将moment库放在服务端用，将所有关于时间的处理放到服务端进行。 image.png

2. 路由懒加载
   

   将下图中的1改为2，详细可以百度搜索 vue路由懒加载 image.png

3. 开启服务端gzip压缩
   我这里用的是nginx，所以下找到nginx配置文件：
   vi /etc/nginx/nginx.conf
   跟着下图一样开放nginx的gzip配置:
   

   image.png

4. 压缩js文件
   用webpack.optimize.UglifyJsPlugin可以压缩js文件

   image.png

5. 提取第三方库
   暂时没有使用此方案

6. 将文件放到cdn上
   在项目根目录index.html使用cdn节点导入

<div id="app"></div>
<!-- 先引入 Vue -->
<!--开发环境-->
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>-->
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.10/index.js"></script>