主机屋如何做网站,电脑网页游戏大全,什么是网络营销名词解释,有效的网站建设公生成gizp的打包资源#xff0c;可以优化页面加载速度 打包的时候开启gzip可以很大程度减少包的大小#xff0c;页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持 1、前端配置compression-webpack-plugin
先安装#xff1a;npm install compres…生成gizp的打包资源可以优化页面加载速度 打包的时候开启gzip可以很大程度减少包的大小页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持 1、前端配置compression-webpack-plugin
先安装npm install compression-webpack-plugin 安装的版本需要注意根据自己的webpack版本来定尽量匹配
01、vue.config.js 在vuecli中
/* 第一种方式 */
const CompressionWebpackPlugin require(compression-webpack-plugin)
const plugins [...]
if (isProduction) {plugins.push(new CompressionWebpackPlugin({filename: [path].gz[query],algorithm: gzip,test: new RegExp(\.( [html, js, css].join(|) )$),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件}))
}
module.exports {configureWebpack: {resolve: {alias: {: resolve(./src)}},plugins},
}
02、 在vuecli中configureWebpack 返回函数式写法
/* 第二种方式 */
// configureWebpack 返回函数式写法
const CompressionWebpackPlugin require(compression-webpack-plugin)
const isProduction process.env.NODE_ENV ! development
module.exports {
...
configureWebpack: (config) {config.plugins.push(new HardSourcePlugin())// 其他配置Object.assign(config.resolve, {alias: {: resolve(./src)}})// 为生产环境修改配置if (isProduction) {config.plugins.push(new CompressionWebpackPlugin({filename: [path].gz[query],algorithm: gzip,test: new RegExp(\.( [html, js, css].join(|) )$),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件}))}},}// webpack.config.js 在webpack搭建的项目中
const CompressionWebpackPlugin require(compression-webpack-plugin)
module.exports {mode: development,...plugins: [new CompressionWebpackPlugin({filename: [path].gz[query],algorithm: gzip,test: new RegExp(\.( [html, js, css].join(|) )$),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件})]2、服务端配置, 以nginx为例
服务端 Nginx 需开启 gzip_static 功能; 在nginx.conf的server模块中加入以下代码:
server{//开启和关闭gzip模式gzip on;//gizp压缩起点文件大于2k才进行压缩;设置允许压缩的页面最小字节数页面字节数从header头得content-length中进行获取。 默认值是0不管页面多大都压缩。建议设置成大于2k的字节数小于2k可能会越压越大。gzip_min_length 2k;// 设置压缩所需要的缓冲区大小以4k为单位如果文件为7k则申请2*4k的缓冲区 gzip_buffers 4 16k;// 设置gzip压缩针对的HTTP协议版本gzip_http_version 1.0;// gzip 压缩级别1-9数字越大压缩的越好也越占用CPU时间gzip_comp_level 2;//进行压缩的文件类型gzip_types text/plain application/javascript text/css application/xml;// 是否在http header中添加Vary: Accept-Encoding建议开启gzip_vary on;
}以上 对于支持gzip的浏览器, 配置成功后请求头中会包含: Accept-Encoding: gzip, deflate 服务器响应时 在响应头中显示: Content-Encoding: gzip
