monorepo-microservice-rbac/apps/aorta/scripts/webpack.prod.ts

104 lines
3.6 KiB
TypeScript
Raw Normal View History

2023-08-27 14:37:59 +08:00
import { Configuration } from "webpack";
import { merge } from "webpack-merge";
import baseConfig from "./webpack.common";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";
import CompressionPlugin from "compression-webpack-plugin";
const globAll = require("glob-all");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
import path from "path";
import CopyWebpackPlugin from "copy-webpack-plugin";
const prodConfig: Configuration = merge(baseConfig, {
mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(), // 压缩css
// 压缩js
new TerserPlugin({
parallel: true, // 开启多线程压缩
terserOptions: {
compress: {
pure_funcs: ["console.log"], // 删除console.log
},
},
}),
],
splitChunks: {
// 分隔代码
cacheGroups: {
vendors: {
// 提取node_modules代码
test: /node_modules/, // 只匹配node_modules里面的模块
name: "vendors", // 提取文件命名为vendors,js后缀和chunkhash会自动加
minChunks: 1, // 只要使用一次就提取出来
chunks: "initial", // 只提取初始化就能获取到的模块,不管异步的
minSize: 0, // 提取代码体积大于0就提取出来
priority: 1, // 提取优先级为1
},
commons: {
// 提取页面公共代码
name: "commons", // 提取文件命名为commons
minChunks: 2, // 只要使用两次就提取出来
chunks: "initial", // 只提取初始化就能获取到的模块,不管异步的
minSize: 0, // 提取代码体积大于0就提取出来
},
},
},
},
performance: {
hints: false,
maxAssetSize: 4000000, // 整数类型(以字节为单位)
maxEntrypointSize: 5000000, // 整数类型(以字节为单位)
},
plugins: [
// 抽离css
new MiniCssExtractPlugin({
filename: "static/css/[name].[contenthash:8].css", // 抽离css的输出目录和名称
}),
// 清理无用css检测src下所有tsx文件和public下index.html中使用的类名和id和标签名称
// 只打包这些文件中用到的样式
new PurgeCSSPlugin({
paths: globAll.sync(
[
`${path.join(__dirname, "../src")}/**/*`,
path.join(__dirname, "../public/index.html"),
],
{
nodir: true,
}
),
// 用 only 来指定 purgecss-webpack-plugin 的入口
// https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin
only: ["dist"],
safelist: {
standard: [/^ant-/], // 过滤以ant-开头的类名,哪怕没用到也不删除
},
}),
// 打包时生成gzip文件减少nginx的gzip实时压缩负载
new CompressionPlugin({
test: /\.(js|css)$/, // 只生成css,js压缩文件
filename: "[path][base].gz", // 文件命名
algorithm: "gzip", // 压缩格式,默认是gzip
threshold: 10240, // 只有大小大于该值的资源会被处理。默认值是 10k
minRatio: 0.8, // 压缩率,默认值是 0.8
}),
new CopyWebpackPlugin({
patterns: [
{
from: path.join(__dirname, "../public/img"),
to: "./img",
},
{
from: path.join(__dirname, "../public/favicon.svg"),
to: ".",
},
],
}),
],
});
export default prodConfig;