前端效率优化
分析项目项目需要优化的地方
分析引入文件的大小 :webpack-bundle-analyzer
- 下载安装
npm install webpack-bundle-analyzer --save-dev - 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 {
}
}
}
- 在package.json 中配置分析指令
{
...
"script":{
"report": "npm_config_report=true npm run build"
}
}
4.通过命令使用
npm run report
lighthouse 检测一个网页运行效率
- 下载安装
npm install lighthouse -g
- 使用
lighthouse 要检测的网址 --view