react性能优化篇之umi.js打包去掉console和开启gzip压缩
react性能优化篇之umi.js打包去掉console和开启gzip压缩
本人已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
本次打包针对react --version 17.0.2 和 umi --verison 3.5
版本上下浮动一下没问题，也可以适用
参考如下👇
一、去除console
第一步： 安装 babel-plugin-transform-remove-console 插件
js
复制代码
npm install babel-plugin-transform-remove-console
第二步：在config.ts或.umirc.ts中进行配置
图例👇
代码👇
js
复制代码
//在生产环境中取消console
extraBabelPlugins: [isProd ? 'transform-remove-console' : '']
//或者
//在所有环境中取消console
extraBabelPlugins: [transform-remove-console]
完成！！！
二、开启gzip压缩
gzip压缩是前端性能优化的一种手段，减少build之后包的体积，加快首屏渲染速度。
第一步：安装 compression-webpack-plugin 插件
复制代码
npm install compression-webpack-plugin
第二步：在config.ts或.umirc.ts中进行配置
图例👇
代码👇
js
复制代码
chainWebpack: function (config, { webpack }) {
config.merge({
optimization: {
splitChunks: {
chunks: 'all',
minSize: 1000,
minChunks: 2,
automaticNameDelimiter: '.',
cacheGroups: {
vendor: {
name: 'vendors',
test({ resource }) {
return /[\\/]node_modules[\\/]/.test(resource)
},
priority: 10,
},
},
},
},
})
//在生产环境开启gzip压缩
if (isProd) {
// Gzip压缩
config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
{
test: /\.(js|css|html)$/i, // 匹配
threshold: 10240, // 超过10k的文件压缩
deleteOriginalAssets: false, // 不删除源文件
},
])
}
}
配置完成后使用npm run build 打包
查看dist文件夹中出现了.gz结尾的压缩包，就是压缩成功了
图例👇
但是到这里还没完，还需要，到这里只是前端完成了gzip压缩。如果在项目中需要gzip压缩之后的压缩文件。还需要后端在nginx中配置 gzip_static on
js
复制代码
//nginx 配置
gzip_static on //检测是否存在gzip文件，有，则返回给客户端
最后，运行项目，找一个css或者js或者html后缀的文件，查看响应头中的 Content-Encoding 字段。显示为gzip则表示gzip在项目中使用成功。
图例👇
到此。gzip压缩开启完成！！
漫思
