Umi.js 项目打包压缩方法

umi.js 脚手架生成的项目打包两种方法:

1. 官方打包方法:

通过webpack打包:

  • 构建命令及产物
  $ yarn build    // 命令行构建
umi-webpack.png
tree ./dist   // 展示打包后的产物;只有静态的js 文件和图片文件
umi-tree-dist.png
  • 本地验证:
  // 发布之前可以自己本地安装serve
$ yarn global add serve
$ serve ./dist   // 执行这一步之后会弹出两个地址,可预览项目

2. 使用webpack 的两个插件进行压缩:

  • 安装第一个插件:使用插件去掉console
$ npm i -D babel-plugin-transform-remove-console    // 去掉console
removeConsole.png
  • 安装第二个插件:
$ npm i -D compression-webpack-plugin   // 使用Gzip 压缩生产包
1.png
  • 修改生产环境中配置文件config.js 或 config.prod.js(我项目中封装成不同组件)
 import { defineConfig } from 'umi'
import CompressionPlugin from 'compression-webpack-plugin'

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

export default defineConfig({
  // 打包时移除 console
  extraBabelPlugins: [production ? '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 (production) {
      // Gzip压缩
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
        {
          test: /\.(js|css|html)$/i, // 匹配
          threshold: 10240, // 超过10k的文件压缩
          deleteOriginalAssets: false, // 不删除源文件
        },
      ])
    }
  },
  // ...
})
  • 本地验证操作和第一种方法一样。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容