首页 > 网络编程 > JavaScript > vue-cli3.0之配置productionGzip方式

vue-cli3.0之配置productionGzip方式

福牛 5月 23, 2023 25 0

vue-cli3.0配置productionGzip

最近没事升级项目到vue-cli3.0， 发现没有了productionGzip配置，于是查了一下资料， 解决方案如下：

提示：本文compression-webpack-plugin的版本号是2.0.0，3.0.0的话看文章内小提示

1.安装如下插件

  1. npm i –D compression–webpack–plugin

2.在文件vue.config.js里导入compression-webpack-plugin，并添加压缩文件类型

  1. const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)
  2. const productionGzipExtensions = [‘js’, ‘css‘]

3.在configureWebpack 里配置如下代码

a.简单方式

  1.      configureWebpack: {
  2.      plugins: [
  3.          new CompressionWebpackPlugin({
  4.          asset: ‘[path].gz[query]’, // 提示compression-webpack-plugin@3.0.0的话asset改为filename
  5.          algorithm: ‘gzip’,
  6.          test: new RegExp(‘\\.(‘ + productionGzipExtensions.join(‘|’) + ‘)$’),
  7.          threshold: 10240,
  8.          minRatio: 0.8
  9.          })
  10.      ]
  11.      },

b.高级方式

  1.      configureWebpack: config => {
  2.      if (process.env.NODE_ENV === ‘production’) {
  3.          // 生产环境
  4.          config.plugins.push(
  5.          new CompressionWebpackPlugin({
  6.              asset: ‘[path].gz[query]’, // 提示示compression-webpack-plugin@3.0.0的话asset改为filename
  7.              algorithm: ‘gzip’,
  8.              test: new RegExp(‘\\.(‘ + productionGzipExtensions.join(‘|’) + ‘)$’),
  9.              threshold: 10240,
  10.              minRatio: 0.8
  11.          })
  12.          );
  13.      } else {
  14.          // 开发环境
  15.      }
  16.      },

 

  1.      // 配置参数详解
  2.      // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
  3.      asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 “[path].gz[query]”。
  4.      algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 “gzip”。
  5.      test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
  6.      threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
  7.      minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。

4.然后运行 npm run build 完成

5.附完整vue.config.js配置代码

  1. const path = require(‘path’);
  2. function resolve(dir) {
  3.      return path.join(__dirname, dir)
  4. }
  5. // 导入compression-webpack-plugin
  6. const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)
  7. // 定义压缩文件类型
  8. const productionGzipExtensions = [‘js’, ‘css’]
  9. module.exports = {
  10.      baseUrl: “/”,
  11.      // 输出目录
  12.      outputDir: ‘dist’,
  13.      lintOnSave: true,
  14.      // 是否为生产环境构建生成 source map？
  15.      productionSourceMap: false,
  16.      // alias 配置
  17.      chainWebpack: (config) => {
  18.      config.resolve.alias
  19.          .set(‘@’, resolve(‘src’))
  20.      },
  21.      // 简单的方式
  22.      // configureWebpack: {
  23.      // plugins: [
  24.      // new CompressionWebpackPlugin({
  25.      // asset: ‘[path].gz[query]’, // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
  26.      // algorithm: ‘gzip’,
  27.      // test: new RegExp(‘\\.(‘ + productionGzipExtensions.join(‘|’) + ‘)$’),
  28.      // threshold: 10240,
  29.      // minRatio: 0.8
  30.      // })
  31.      // ]
  32.      // },
  33.      // 高级的方式
  34.      configureWebpack: config => {
  35.      if (process.env.NODE_ENV === ‘production’) {
  36.          // 生产环境
  37.          config.plugins.push(
  38.          new CompressionWebpackPlugin({
  39.              asset: ‘[path].gz[query]’, // 提示 compression-webpack-plugin@3.0.0的话asset改为filename
  40.              algorithm: ‘gzip’,
  41.              test: new RegExp(‘\\.(‘ + productionGzipExtensions.join(‘|’) + ‘)$’),
  42.              threshold: 10240,
  43.              minRatio: 0.8
  44.          })
  45.          );
  46.      } else {
  47.          // 开发环境
  48.      }
  49.      },
  50.      // CSS 相关选项
  51.      css: {
  52.      extract: true,
  53.      // 是否开启 CSS source map？
  54.      sourceMap: false,
  55.      // 为预处理器的 loader 传递自定义选项。比如传递给
  56.      // sass-loader 时，使用 `{ sass: { … } }`。
  57.      loaderOptions: {}, // 为所有的 CSS 及其预处理文件开启 CSS Modules。
  58.      modules: false
  59.      },
  60.      // 在多核机器下会默认开启。
  61.      parallel: require(‘os’).cpus().length > 1,
  62.      // PWA 插件的选项。
  63.      pwa: {},
  64.      // 配置 webpack-dev-server 行为。
  65.      devServer: {
  66.      open: process.env.NODE_ENV === “development”,
  67.      host: ‘localhost’,
  68.      port: 8888,
  69.      https: true,
  70.      hotOnly: false,
  71.      open: true,
  72.      proxy: ”, // string | Object
  73.      before: app => {}
  74.      },
  75.      // 第三方插件的选项
  76.      pluginOptions: {}
  77. }

vue3.0配置gzip 及 资源404

第一步：vue.config.js

  1.      plugins: [
  2.          new CompressionPlugin({
  3.          test:productionGzipExtensions, //匹配文件名
  4.          threshold: 10240,//对超过10k的数据压缩
  5.          deleteOriginalAssets: true //不删除源文件
  6.          })
  7.      ],

打包效果

-1

第二步：这里使用 nginx 进行配置

这里遇到了 小问题 ：

deleteOriginalAssets: true //不删除源文件 为true时，页面加载资源呈404，需要配置nginx开启打包静态文件

-2

  1. nginx.conf
  2.      gzip on;
  3.      gzip_static on; # 开启静态文件压缩
  4.      gzip_min_length 1k; # 不压缩临界值，大于1K的才压缩
  5.      gzip_buffers 4 16k;
  6.      gzip_http_version 1.1;
  7.      gzip_comp_level 2;
  8.      gzip_types text/plain application/Javascript application/x–javascript text/javascript text/css application/XML application/xml+RSS; # #进行压缩的文件类型
  9.      gzip_vary on;
  10.      gzip_proxied expired no–cache no–store private auth;
  11.      gzip_disable “MSIE [1-6]\.”;

开启Nginx gzip压缩非常简单，达到的效果可以压缩静态文件大小、提高页面访问速度、节省流量和带宽是很有帮助的，也为用户省去了很多流量；唯一的不足就是开启之后服务器这边会增加运算，进行压缩运算处理，就比如压缩级别，服务器cpu会有开销。

请求正常：

-3

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论