关于gzip压缩转载+siping项目代码

最新推荐文章于 2024-08-03 17:05:14 发布

zongzi_494

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量104

点赞数

分类专栏： vue页面文章标签： javascript webpack 前端

本文链接：https://blog.csdn.net/zongzi494/article/details/129237136

版权

vue页面专栏收录该内容

22 篇文章 1 订阅

订阅专栏

可以先看这个转载链接了解详情我这里就补一下具体的代码

package.json文件先加一哈需要下载的插件和版本

  "devDependencies": {
    "compression-webpack-plugin": "^1.1.12",   giz用
    "uglifyjs-webpack-plugin": "^2.2.0",  去掉console.log之类的
    "webpack-bundle-analyzer": "^3.0.3"   看打包文件大小用
  },

vue.config.js文件

const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");



 chainWebpack: (config) => {
    config.plugin("compressionPlugin").use(
      new CompressionPlugin({
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
      })
    );

    config
      .plugin("gzip-plugin")
      .use("compression-webpack-plugin", [
        {
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: /\.js$|\.html$|\.json$|\.css$|\.ttf$|\.TTF$/,
          threshold: 0, // 只有大小大于该值的资源会被处理
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false, // 删除原文件
        },
      ])
      .end();

    //依赖超过一定大小后被单独打包
    config.optimization.splitChunks({
      chunks: "all",
      maxInitialRequests: Infinity,
      minSize: 300000, // 依赖包超过300000bit将被单独打包
      automaticNameDelimiter: "-",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name (module) {
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];
            return `chunk.${packageName.replace("@", "")}`;
          },
          priority: 10,
        },
      },
    });

  },


  configureWebpack: {
	optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false,
            },
            parallel: true,
            // 删除console debugger 删除警告
            compress: {
              warnings: false,
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ["console.log"], //移除console
            },
          },
        }),
      ],
    },
},