下方代码,直接复制粘贴使用即可 const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件 // 暴露配置项,会被合并到webpack中去 module.exports = { chainWebpack(config) { // ... }, configureWebpack: config => { // 开发环境不配置 if (process.env.NODE_ENV !=...
完成上述配置后,重启Nginx服务器,并访问你的Vue应用,检查网络请求的响应头,确认是否返回了Content-Encoding: gzip,以验证gzip压缩是否生效。 http Content-Encoding: gzip 通过以上步骤,你应该能够在Vue项目中成功使用compression-webpack-plugin进行静态资源的gzip压缩,从而优化项目的加载性能。
1.安装compression-webpack-plugin npminstall--save-dev compression-webpack-plugin 2.vue.config.js配置 const CompressionPlugin = require("compression-webpack-plugin"); const IS_PROD=["production","prod"].includes(process.env.NODE_ENV); module.exports={ chainWebpack: (config)=>{//开启js、css...
productionSourceMap:false, configureWebpack: {...}, chainWebpack: config=>{ config.resolve.alias.set('@', resolve('src'));if(process.env.NODE_ENV ==='production') { config.plugin('compressionPlugin') .use(newCompressionPlugin({ filename:'[path].gz[query]', algorithm:'gzip', test: p...
第一步,下载compression-webpack-plugin cnpm i compression-webpack-plugin@6.1.1 --save 注意,这里不能直接下载,需要下载低版本的。直接下载就是最新版的了,vue脚手架暂时不支持最新版的,所以就会报错:TypeError: Cannot read property 'tapPromise' of undefined。我这里下载是指定@6.1.1版本,是可以用的 ...
根据主篇内容继续通过compression-webpack-plugin插件处理chunk-vendors.js文件过大的问题。 创建vue.config.js 文件,后续配置都需要用到配置文件。 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度,浏览器可以直接解析.gz文件并解压。
npm install--save-dev compression-webpack-plugin@1.1.12 这样,你在 build 项目时,webpack 会帮你压缩文件。 如果没有的话,你只要把上面代码复制到 webpack 配置文件的 plugins 下即可。 如何方面查看build之后的文件大小呢?我们可以使用另外一个 webpack 插件:webpack-bundle-analyzer ,如何使用呢?默认 Vue ...
<>1、安装插件:compression-webpack-plugin npm i -D compression-webpack-plugin <>2、在 vue.config.js 文件中配置 compression-webpack-plugin const compressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件 const productionGZipExtensions = ['js', 'css']; //压缩的文件类型 modul...
compression-webpack-plugin 是一个用于压缩 Webpack 打包后的资源的插件。在配置 Vue 项目时,需要在 vue.config.js 文件中进行配置。 如果 compression-webpack-plugin 不生效,可能是以下原因之一: 没有安装 c…
plugins: [newcompressionWebpackPlugin({//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。filename: '[path].gz[query]',//提示compression-webpack-plugin@3.0.0的话asset改为filename//可以是 function(buf, callback) ...