美文网首页大前端
UmiJS学习与实战系列 · 打包去掉console,开启Gzi

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

作者: 天問_专注于大前端技术 | 来源:发表于2021-10-24 21:21 被阅读0次

UmiJS是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

UmiJS项目打完包体积比较大,首次加载比较慢,为了解决这个问题,执行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.tsconfig/config.ts 中进行配置
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学习与实战》系列


欢迎访问:个人博客地址

相关文章

网友评论

    本文标题:UmiJS学习与实战系列 · 打包去掉console,开启Gzi

    本文链接:https://www.haomeiwen.com/subject/feedaltx.html