标签：npm Vue 优化 前端 bundle report webpack gzip config

分析项目需要优化的地方（两个插件）

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中设置

标签：npm,Vue,优化,前端,bundle,report,webpack,gzip,config
来源： https://www.cnblogs.com/imbacool/p/12461347.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。