UmiJS是可擴展的企業(yè)級前端應(yīng)用框架。Umi 以路由為基礎(chǔ)的缩筛，同時支持配置式路由和約定式路由，保證路由的功能完備堡称，并以此進(jìn)行功能擴展瞎抛。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期却紧，支持各種功能擴展和業(yè)務(wù)需求桐臊。
UmiJS項目打完包體積比較大，首次加載比較慢晓殊，為了解決這個問題断凶，執(zhí)行build時移除console，并開啟了Gzip壓縮巫俺。
UmiJS-Build
安裝插件
# 安裝 `babel-plugin-transform-remove-console` 插件
npm i -D babel-plugin-transform-remove-console
# 安裝 `compression-webpack-plugin` 插件
npm i -D compression-webpack-plugin
配置
- 在
.umirc.ts或config/config.ts中進(jìn)行配置
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
參考文檔：
《UmiJS學(xué)習(xí)與實戰(zhàn)》系列
歡迎訪問：個人博客地址
