104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
|
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;
|