前端性能优化总结

gzip压缩

gzip压缩效率很高，可以达到70%的压缩率

//npm i -D compression-webpack-plugin 安装插件依赖
configureWebpack: config => {
const CompressionPlugin = require(‘compression-webpack-plugin’)
config.plugins.push(new CompressionPlugin())
}

去掉console.log

生产环境中，不需要打印日志。通过对webpack进行配置，打包时自动去掉console.log

//npm i -D terser-webpack-plugin
configureWebpack:config =>{
const TerserPlugin = require(‘terser-webpack-pulugin’)
config.optimzation.minimizer.push(
new TerserPlugin({
extractComments:false,
terserOptions:{compress:{drop_console:true}} //插件配置项 移除console
})
)
}

去除SourceMap

代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试。

sourcemap附带了很多信息，如果build需要生成sourcemap，将会大大降低build的速度，还会增加包的体积。

//vue 中
module.exports = {
productionSourceMap: false,
}

//react中
//打开webpack.config.prod.js
const shouldUseSourceMap = false

CDN

内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。所以可以通过将资源部署在CDN上来提高响应速度，提高用户体验
预渲染

简单来说，就是将浏览器解析JavaScript动态渲染的工作，在打包阶段完成了（只构建了静态数据）。换个说法，在构建过程中，webpack通过使用prerender-spa-plugin插件生成静态结构的html

 

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118514925