效率优化工具(前端效率优化)

分析项目需要优化的地方

分析引入文件的大小 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(repuire('webpack-bundle-analyzer').BundleAnalyzerPlugin)
					.end();
			}
		}else{
			
		}
	}
}

3. 在package.json 中配置分析指令

{
	...
	"script":{
		"report":"npm_config_report=true npm run build"
	}
}

4. 通过命令使用

npm run report

lighthouse 检测一个网页运行效率

1. 下载安装

npm install lighthouse -g

2. 使用

lighthouse 要检测的网址 --view