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 也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。