一、compression-webpack-plugin介紹
參考地址：https://v4.webpack.js.org/plugins/compression-webpack-plugin/文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-850682.html
一、compression-webpack-plugin的使用，安裝插件
npm install compression-webpack-plugin --save-dev
二、在 webpack 配置中,require 或 import 引入
const CompressionPlugin = require('compression-webpack-plugin');
三、配置
/*
* filename: '[path][base].gz', // 輸出壓縮文件的名稱
* algorithm: 'gzip', // 使用的壓縮算法，默認(rèn)為 'gzip'
* test: /\.(js|css|html)$/, // 匹配需要壓縮的文件類型
* threshold: 10240, // 只壓縮大于該大小的文件，默認(rèn)為 0
* minRatio: 0.8 // 只有壓縮率大于該值的文件才會(huì)被壓縮，默認(rèn)為 0.8
* deleteOriginalAssets //刪除源文件
*/
//
module.exports = {
plugins: [
new CompressionPlugin(
{
algorithm: "gzip",
test: /\.(js|css)$/, // 匹配文件名
threshold: 10240, // 對(duì)超過(guò)10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false, // 不刪除源文件
minRatio: 0.8, // 壓縮比
}
)
]
}
一、terser-webpack-plugin介紹
參考地址：https://v4.webpack.js.org/plugins/terser-webpack-plugin/文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-850682.html
一、安裝terser-webpack-plugin
npm install terser-webpack-plugin --save-dev
二、在 Webpack 配置中引入
const TerserPlugin = require('terser-webpack-plugin');
三、配置
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
// 插件的選項(xiàng)配置
extractComments: false, // 是否提取注釋，默認(rèn)為 true
terserOptions: {
compress: {
drop_console: true, // 去除 console.log 語(yǔ)句
},
output: {
comments: false, // 是否保留注釋，默認(rèn)為 true
},
},
})
]
}
}
到了這里，關(guān)于vue中webpack配置compression-webpack-plugin打包壓縮和優(yōu)化，terser-webpack-plugin在構(gòu)建過(guò)程中對(duì) JavaScript 代碼進(jìn)行壓縮和優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
