1. 压缩项目大小
1. 编写vue.config.js。压缩生成的js文件。
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件 configureWebpack: config => { return { plugins:[ new CompressionPlugin({//gzip压缩配置 test:/\.js$|\.html$|\.css/,//匹配文件名 threshold:10240,//对超过10kb的数据进行压缩 deleteOriginalAssets:false,//是否删除原文件 filename: '[path].gz[query]', algorithm: 'gzip', // test: productionGzipExtensions, // threshold: 2048, // minRatio: 0.8 })] } },2. 需要对服务器进行设置，使之支持gzip格式的js文件。
server { listen 88; server_name localhost; location / { gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 9; gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml; gzip_vary on; root html/subCharge; index index.html index.htm; } location /api { # rewrite ^/apis/(.*)$ /$1 break; proxy_pass http://47.92.34.130:8080/chargeSub/; } }2. 路由懒加载
vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。