3步搞定,實(shí)測1.3Mjs壓縮到363k,體積減少70%
1.裝包yarn add compression-webpack-plugin --dev
2.配置webpack
打開config/webpack.config.js
1)在 module.exports 導(dǎo)出函數(shù)前面引入插件文章來源:http://www.zghlxwxcb.cn/news/detail-611485.html
// gzip插件
const CompressionPlugin = require("compression-webpack-plugin");
2)添加配置
位置,搜索new HtmlWebpackPlugin(在其上邊添加配置文章來源地址http://www.zghlxwxcb.cn/news/detail-611485.html
plugins: [
// gzip配置項(xiàng)
new CompressionPlugin({
filename: "[path][base].gz",
algorithm: "gzip", // 算法
test: new RegExp("\\.(js|css)$"), // 壓縮 js 與 css
threshold: 1024, // 只處理比這個(gè)值大的資源。按字節(jié)計(jì)算 10240
minRatio: 0.8, // 只有壓縮率比這個(gè)值小的資源才會(huì)被處理
}),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
到了這里,關(guān)于性能優(yōu)化-webpack配置gzip的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!