解决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节点导入