vue加载优化(全)

1、路由懒加载

const loginFail = resolve => require(["@/views/loginFail"], resolve);

2、压缩包方式

config文件夹中修改index.js文件

  //productionGzip: false,// 默认值为false
  productionGzip: true,

执行

npm install --save-dev compression-webpack-plugn

执行，一切正常则万事大吉

npm run build

出现版本不匹配等问题，降级webpack

npm install --save-dev compression-webpack-plugin@1.1.11

其他异常自行解决

完成后

npm run build

正常打包结束后 dist/static文件中的css和js应该都会有压缩

本地打包结束，修改nginx.conf服务器配置 添加如下配置

#gzip  on;
     gzip on; gzip_min_length 1k;
     gzip_buffers 4 16k;
     gzip_http_version 1.0;
     gzip_comp_level 2;
     gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
     gzip_vary off;
     gzip_disable "MSIE [1-6]\.";

完成后，重启nginx 压缩包方式方式优化完成

3、去除productionSourceMap

config文件夹中修改index.js文件 
 productionSourceMap: false,

4、可视化webpack-bundle-analyzer分析webpack结构

npm run build --report

4、图片压缩