• vue打包压缩安装依赖且配置


    npm install --save-dev compression-webpack-plugin

    npm install --save-dev terser-webpack-plugin

    const TerserPlugin = require('terser-webpack-plugin')
    // gzip压缩
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
     
    configureWebpack: (config) => {

        // if (process.env.NODE_ENV === "production") {
        //   // 生产环境
        //   config.mode = "production";
        // } else {
        //   // 开发环境
        //   config.mode = "development";
        // }
        // 忽略打包配置
        if (isProduction) {
          // 生产环境
          //gzip压缩
          const productionGzipExtensions = ['html', 'js', 'css']
          config.plugins.push(
            new CompressionWebpackPlugin({
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              // eslint-disable-next-line no-useless-escape
              test: new RegExp('.(' + productionGzipExtensions.join('|') + ')$'),
              threshold: 200, // 只有大小大于该值的资源会被处理 10240
              minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
              deleteOriginalAssets: false, // 删除原文件
            })
          )
          // 公共代码抽离
          config.optimization = {
            //去掉console
            minimizer: [
              new TerserPlugin({
                sourceMap: false,
                terserOptions: {
                  compress: {
                    drop_console: true
                  }
                }
              })
            ],
            // 分割代码块 chunk
            splitChunks: {
              cacheGroups: {
                //公用模块抽离
                common: {
                  chunks: 'initial',
                  minSize: 0, //大于0个字节
                  minChunks: 2, //抽离公共代码时,这个代码块最小被引用的次数
                },
                //第三方库抽离
                vendor: {
                  priority: 1, //权重
                  test: /node_modules/,
                  chunks: 'initial',
                  minSize: 0, //大于0个字节
                  minChunks: 2, //在分割之前,这个代码块最小应该被引用的次数
                },
              }
            }
          }
        }
        else {
          // 开发环境
          // config.mode = 'development';
        }
      },
  • 相关阅读:
    Vue 页面权限控制和登陆验证
    Vue 动态添加路由及生成菜单
    开发一个简单的 Vue 弹窗组件
    VS使用和错误收集
    ARP欺骗的实现
    虚拟机安装64位系统(Windows Server 2008R2 Datacenter版本)
    Kali安装问题
    HTML5学习之四:多媒体播放
    HTML5学习之三:文件与拖放
    HTML5学习之二:HTML5中的表单2
  • 原文地址:https://www.cnblogs.com/yixiaoyang-/p/13267079.html
Copyright © 2020-2023  润新知