UmiJS学习与实战系列 · 打包去掉console,开启Gzip压缩


字数:262 阅读时长:1分钟 阅读:85

UmiJS项目打完包体积比较大,首次加载比较慢,为了解决这个问题,执行build时移除console,并开启了Gzip压缩

UmiJS

安装插件

1
2
3
4
5
# 安装 `babel-plugin-transform-remove-console` 插件
npm i -D babel-plugin-transform-remove-console

# 安装 `compression-webpack-plugin` 插件
npm i -D compression-webpack-plugin

配置

  • .umirc.tsconfig/config.ts 中进行配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { defineConfig } from 'umi'
import CompressionPlugin from 'compression-webpack-plugin'

const isProd = process.env.NODE_ENV === 'production'

export default defineConfig({
// ...
// 打包时移除 console
extraBabelPlugins: [isProd ? 'transform-remove-console' : ''],
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,
},
},
},
},
})
if (isProd) {
// Gzip压缩
config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
{
test: /\.(js|css|html)$/i, // 匹配
threshold: 10240, // 超过10k的文件压缩
deleteOriginalAssets: false, // 不删除源文件
},
])
}
},
// ...
})

《UmiJS学习与实战》系列


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-09-07
最后更新: 2021-12-10
本文标题: UmiJS学习与实战系列 · 打包去掉console,开启Gzip压缩
本文链接: https://www.tiven.cn/p/cfb603e2/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^