npm install --save-dev compression-webpack-plugin
npm install --save-dev terser-webpack-plugin
const TerserPlugin = require('terser-webpack-plugin')
// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
// if (process.env.NODE_ENV === "production") {
// // 生產環境
// config.mode = "production";
// } else {
// // 開發環境
// config.mode = "development";
// }
// 忽略打包配置
if (isProduction) {
// 生產環境
//gzip壓縮
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
// eslint-disable-next-line no-useless-escape
test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 200, // 只有大小大於該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小於這個值的資源才會被處理
deleteOriginalAssets: false, // 刪除原文件
})
)
// 公共代碼抽離
config.optimization = {
//去掉console
minimizer: [
new TerserPlugin({
sourceMap: false,
terserOptions: {
compress: {
drop_console: true
}
}
})
],
// 分割代碼塊 chunk
splitChunks: {
cacheGroups: {
//公用模塊抽離
common: {
chunks: 'initial',
minSize: 0, //大於0個字節
minChunks: 2, //抽離公共代碼時，這個代碼塊最小被引用的次數
},
//第三方庫抽離
vendor: {
priority: 1, //權重
test: /node_modules/,
chunks: 'initial',
minSize: 0, //大於0個字節
minChunks: 2, //在分割之前，這個代碼塊最小應該被引用的次數
},
}
}
}
}
else {
// 開發環境
// config.mode = 'development';
}
},