原创不易,未经作者允许禁止转载!!
前段时间和天诚学长(21届上岸TX的大佬)交流了一下他在Webpack CSS压缩遇到的坑,一时兴起总结了这篇Webpack体积压缩相关的知识,希望你读完能有所收获!
使用CompressionPlugin对文件进行压缩
npm install compression-webpack-plugin
const CompressionPlugin = require("compression-webpack-plugin")
plugins:[
new CompressionPlugin({
threshold: 0,
minRatio:0.6,
test:/\.(css|js)/i,
algorithm:"gzip"
})
]
plugins: [
new HtmlWebpackPlugin({
title: "LeBronChao Webpack",
template: "./src/index.html",
inject:"body",
cache:true,
minify: isProduction ? {
removeComments: true, // 是否删除注释
removeRedundantAttributes:true, // 是否删除多余(默认)属性
removeEmptyAttributes:true, // 是否删除空属性
collapseWhitespace:false, // 折叠空格
removeStyleLinkTypeAttributes:true, // 比如link中的type="text/css"
minifyCSS:true, // 是否压缩style标签内的css
minifyJS:{ // 压缩JS选项,可参考Terser配置
mangle:{
toplevel: true
}
}
}: false
}),
]
npm i react-dev-utils
const InlieChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin")
plugins:[
new InlieChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/])
]
npm i terser -g
npm i css-minimizer-webpack-plugin
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const isProduction = true
const TerserPlugin = require("terser-webpack-plugin")
const CssMiniMizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
mode: "production",
optimization: {
chunkIds: "deterministic",
minimize:true,
minimizer:[
new TerserPlugin({
extractComments:true,
parallel:true,
terserOptions:{
compress:true,
mangle:true,
toplevel:false,
keep_classnames:false
}
}),
new CssMiniMizerPlugin({
parallel:true
})
]
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: "public",
// 可不写,默认到output
to: "",
globOptions: {
ignore: ["**/index.html", "**/.DS_Store", "**/abc.txt"],
},
},
],
})
]
}