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, // 不删除源文件
},
])
}
},
// ...
})
- 本地验证操作和第一种方法一样。
