const CompressionWebpackPlugin = require('compression-webpack-plugin')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
// const TerserPlugin = require('terser-webpack-plugin');
// const webpack = require('webpack')
const smp = new SpeedMeasurePlugin()
const configuration = config => {
const _config = {
plugins: [],
}
if (process.env.NODE_ENV === 'production') {
_config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 0,
minRatio: 0.8,
deleteOriginalAssets: false // 删除原文件
})
)
// _config.plugins.push(
// new webpack.optimize.LimitChunkCountPlugin({
// maxChunks: 5,
// minChunkSize: 10000
// })
// )
// 解析scss sass-loader // css 兼容性postcss-loader
// _config.plugins.push(
// {
// test: /\.(css|scss)$/,
// use: [
// 'style-loader',
// {
// // 表示我要运行这个要先经过下面两个过一下
// loader: 'css-loader',
// options: {
// importLoaders: 2,
// },
// },
// 'sass-loader',
// 'postcss-loader',
// ],
// },
// )
}
return _config
}
module.exports = {
productionSourceMap: false, // 生产打包时不输出map文件,增加打包速度
configureWebpack: smp.wrap(configuration),
// 发布时删除console
chainWebpack: (config) => {
// 发行或运行时启用了压缩时会生效
config.optimization.minimizer("terser").tap((args) => {
const compress = args[0].terserOptions.compress;
// 非 App 平台移除 console 代码(包含所有 console 方法,如 log,debug,info...)
compress.drop_console = true;
compress.pure_funcs = [
"__f__", // App 平台 vue 移除日志代码
// 'console.debug' // 可移除指定的 console 方法
];
return args;
});
config.optimization.splitChunks({
// chunks:针对不同的打包方式来实现代码分割 有 all async initial(同步代码)三种 默认async
// 异步的直接分割即可,
// 但是如果是同步的话,就会往下继续读取CacheGroups的配置
chunks: 'async',
minSize: 30000,
// minSize: 20000, // 最小尺寸,大于20000字节才会进行文件分割
// maxSize: 50000000, //单个分割代码块不能大于这个数,一般不用
minChunks: 1, // 文件被引用多少次取分割
maxAsyncRequests: 5, // 最大模块引用数,前30个都会进行分割,后面的不分割
maxInitialRequests: 3, // 最大入口文件引用数
automaticNameDelimiter: '~', //连接符,打包之后分组文件之间的连接符
cacheGroups: {
defaultVendors: {
// 同步配置
// 规则一:如果从node_modules中导入的包加上defaultVendors前缀
test: /[\\/]node_modules[\\/]/,
priority: -10, // 权重,如果两个规则都匹配哪个大按哪个规则
},
// 规则二
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true, // 之前有已经打包过的目录就忽略他,
},
},
})
},
// configureWebpack: config => {
// if (process.env.NODE_ENV === 'production') {
// config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
// config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
// config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
// config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
// }
// }
}
控制台打印
[HBuilder] 10:50:07.145 项目 '万福-h5' 开始发布h5...
[HBuilder] 10:50:07.150 项目 '万福-h5' 开始编译...
[HBuilder] 10:50:09.146 正在编译中...
[HBuilder] 10:50:10.689 项目 '万福-h5' 发布h5失败.
栉风
解决了吗 vite.config.js怎么配置啊
2024-01-03 15:50