分析项目需要优化的地方（两个插件）
1、分析引入文件的大小 ：webpack-bundle-analyzer
1. 下载安装
npm install webpack-bundle-analyzer --save-dev
2. vue.config.js 配置
module.export:{
chainwebpack:(config)=>{
if (process.env.NODE_ENV === 'production') {
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
}
} else {
}
}
}
3. 在package.json 中配置分析指令
{
"script":{
"report": "npm_config_report=true npm run build"
}
}
4.通过命令使用
npm run report
2、lighthouse 检测一个网页运行效率
1. 下载安装
npm install lighthouse -g
2. 使用
lighthouse 要检测的网址 --view
gzip压缩（压缩文件大小，加快加载速度）
a.本地打包的时候产生gzip压缩文件
在vue.config中设置
const CompressionPlugin = require('compression-webpack-plugin') //gzip 压缩的插件
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; //要进行压缩的文件类型
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new CompressionPlugin({
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
)
}
}
b.nginx 服务器配置 开启gzip压缩
提升用户体验
在加载等待时间添加过度动画
在index.html中设置