3步搞定,实测1.3Mjs压缩到363k,体积减少70%
1.装包yarn add compression-webpack-plugin --dev
2.配置webpack
打开config/webpack.config.js
1)在 module.exports 导出函数前面引入插件文章来源:https://www.toymoban.com/news/detail-611485.html
// gzip插件
const CompressionPlugin = require("compression-webpack-plugin");
2)添加配置
位置,搜索new HtmlWebpackPlugin(在其上边添加配置文章来源地址https://www.toymoban.com/news/detail-611485.html
plugins: [
// gzip配置项
new CompressionPlugin({
filename: "[path][base].gz",
algorithm: "gzip", // 算法
test: new RegExp("\\.(js|css)$"), // 压缩 js 与 css
threshold: 1024, // 只处理比这个值大的资源。按字节计算 10240
minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
}),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
到了这里,关于性能优化-webpack配置gzip的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!