vue.config.js Verpackungsoptimierungskonfiguration

const path = require('Pfad');
// gzip-Komprimierung const CompressionPlugin = require('compression-webpack-plugin')
//Überwachungsprotokoll const SentryCliPlugin = require('@sentry/webpack-plugin');
// Codekomprimierung const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const Version = neues Date().getTime();
Funktion „resolve(dir)“ {
  return path.join(__dirname, dir)
}
Konstanten cdn = {
  java.js: [
    // vue muss im ersten 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js' stehen,
    „https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js“,
    „https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js“,
    „https://cdn.bootcss.com/axios/0.18.1/axios.min.js“,
    'https://cdn.bootcss.com/qs/6.5.1/qs.min.js',
    „https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js“
  ]
}
modul.exporte = {
  //Basis-URL beim Bereitstellen des Anwendungspakets
  öffentlicher Pfad: './',

  //Verzeichnis der Build-Dateien der Produktionsumgebung, die beim Ausführen von vue-cli-service build outputDir generiert werden: 'wx_vue',

  //Platziere die generierten statischen Ressourcen (js, css, img, fonts) im Verzeichnis (relativ zu outputDir) assetsDir: './' + Version + '/assets',

  // Ob eslint-loader beim Speichern die Installation von @vue/cli-plugin-eslint überprüft lintOnSave: false,

  //Ob ein Vue-Build verwendet werden soll, der einen Laufzeitcompiler enthält. Nach dem Setzen von true können Sie die Vorlage verwenden
  LaufzeitCompiler: true,

  // Ob eine SourceMap-Datei in der Produktionsumgebung generiert werden soll. Einzelheiten zu SourceMap finden Sie am Ende der Produktion. SourceMap: false,

  /** Hash entfernen */
  DateinameHashing: true,


  // Seiten: {
  // Index: {
  // Eintrag: 'src/main.js',
  // Vorlage: 'public/index.html',
  // Dateiname: 'index.html'
  // }
  // },
  konfigurierenWebpack: config => {
    wenn (Prozess.Umgebung.NODE_ENV === 'Produktion') {
      // Konfiguration für Produktionsumgebung ändern …
      config.mode = "Produktion"
      config.devtool = "Quellkarte";
    } anders {
      // Konfiguration für Entwicklungsumgebung ändern …
      config.mode = "Entwicklung"
    }
    /** Prefetch-Preload des Lazy-Loading-Moduls löschen, um den Bandbreitendruck zu reduzieren (wird auf mobilen Endgeräten verwendet) */
    config.plugins.delete("prefetch").delete("vorladen")
    config.optimization.minimize(true)
    // gzip-Komprimierung // config.plugin("compressionPlugin").use(CompressionPlugin).tap(() => [
    // {
    // Dateiname: '[Pfad].gz[Abfrage]',
    // Algorithmus: "gzip",
    // test: /\.js$|\.html$|\.css/, //Dateinamen abgleichen// threshold: 10240, //Komprimieren, wenn die Dateigröße über 10 KB liegt// minRatio: 0,8, //Nur Ressourcen mit einer Komprimierungsrate unter diesem Wert werden verarbeitet// deleteOriginalAssets: false //Gibt an, ob die Quelldatei gelöscht werden soll// }
    // ])
    config.plugins.push(
      neues KompressionsPlugin({
        Dateiname: '[Pfad].gz[Abfrage]',
        Algorithmus: "gzip",
        Test: /\.js$|\.html$|\.css/,
        Schwellenwert: 10240, // Es werden nur Ressourcen verarbeitet, die größer als dieser Wert sind 10240
        minRatio: 0.8, // Es werden nur Ressourcen mit einer niedrigeren Komprimierungsrate als dieser Wert verarbeitet deleteOriginalAssets: false // Lösche die Originaldatei })
    )
    // Allgemeine Codeextraktion config.optimization = {
      geteilte Chunks: {
        CacheGruppen:
          Verkäufer:
            Brocken: "alle",
            Test: /node_modules/,
            Name: "Anbieter",
            minChunks: 1,
            maxInitialRequests: 5,
            minGröße: 0,
            Priorität: 100
          },
          gemeinsam:
            Brocken: "alle",
            Test: /[\\/]src[\\/]js[\\/]/,
            Name: "allgemein",
            minChunks: 2,
            maxInitialRequests: 5,
            minGröße: 0,
            Priorität: 60
          },
          Stile: {
            Name: "Stile",
            Test: /\.(sa|sc|c)ss$/,
            Brocken: "alle",
            erzwingen: wahr
          },
          LaufzeitChunk: {
            Name: "Manifest"
          }
        }
      }
    }
  },
  konfigurierenWebpack: {
    lösen: {
      Alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': auflösen('src'),
        '@c': Pfad.auflösen(__Verzeichnisname, './src/Komponenten'),
        „Assets“: Pfad.Auflösen(__Verzeichnisname, „../src/Assets“)
      }
    },
    Äußerlichkeiten: {
      'vue': 'Ansicht',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'qs': 'Fragen',
      'vant': 'Vant'
      // 'weixin-js-sdk': 'weixin-js-sdk',
      // 'Zwischenablage': 'Zwischenablage',
      // 'qrcodejs2':'qrcodejs2',
      // 'js-md5':'js-md5'
    },
    Optimierung:
      Minimierer:
        neues UglifyJsPlugin({
          hässlicheOptionen: {
            Ausgabe: { // Kommentare löschen Kommentare: false
            },
            //Die Produktionsumgebung löscht automatisch die Konsole
            komprimieren: {
              //warnings: false, // Falls die Verpackung falsch ist, kommentieren Sie diese Zeile drop_debugger: true, // Debugger-Anweisung löschen drop_console: true, // Konsolen-Anweisung löschen pure_funcs: ['console.log']
            }
          },
          Quellkarte: falsch,
          parallel: wahr
        })
      ]
    }
  },

  // CSS-bezogene Konfiguration css: {
    Auszug: falsch,
    loaderOptions: {
      Stift:
        'URL auflösen': true,
        'importieren': []
      },
      // weniger: {
      // // `globalVars` definiert ein globales Objekt, dem globale Variablen hinzugefügt werden können // globalVars: {
      // primär: '#333'
      // }
      // }
    },
    requireModuleExtension: true,
  },

  // webpack-dev-server-bezogene Konfiguration devServer: { // Proxy festlegen hot: true, //Hot Loading Host: ‚localhost‘, //IP-Adress-Port: 8085, //Port https: false, //false schaltet https aus, true schaltet es ein open: true, //Browser-Proxy automatisch öffnen: { //Mehrere domänenübergreifende Konfiguration ‚/api‘: { //Lokal//Ziel: ‚http://172.168.10.150:81/ysol_wx‘,
        //Ziel: 'http://yishanonline.cn/ysol_wx',
        Ziel: 'https://yishanol.cn/ysol_wx',
        ws: wahr,
        changeOrigin: wahr,
        PfadNeu schreiben: {
          '^/api': ''
        }
      }
    }
  },

  pluginOptions: { // Konfiguration von Drittanbieter-Plugins // ...
  },
  chainWebpack: Konfiguration => {
    // ============Bild komprimierenstart============
    Konfigurationsmodul
      .rule('Bilder')
      .verwenden('image-webpack-loader')
      .loader('Bild-Webpack-Loader')
      .Optionen({
        //{ bypassOnDebug: true }
        mozjpeg: { progressive: true, quality: 65 }, JPEG-Bilder komprimieren
        optipng: { enabled: false }, // PNG-Bilder komprimieren
        pngquant: { Qualität: [0,65, 0,9], Geschwindigkeit: 4 }, // PNG-Bilder komprimieren
        gifsicle: { interlaced: false }, // SVG-Bilder komprimieren
        // webp: { Qualität: 75 }
      })
      .Ende()
    // config.module.rules.push({
    // Test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    // verwenden:[{
    // Lader: 'image-webpack-loader',
    // Optionen: {bypassOnDebug: true}
    // }]
    // })
    // ============Bild komprimierenende============
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      Argumente zurückgeben
    })

    /* Analysetools hinzufügen */
    wenn (Prozess.Umgebung.NODE_ENV === 'Produktion') {
      wenn (process.env.npm_config_report) {
        Konfiguration
          .plugin('webpack-bundle-analyzer')
          .verwenden(erfordert('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .Ende();
        config.plugins.delete('Vorabruf')
      }
    }

    if (process.env.UMI_ENV === 'production') { //Sourcemap wird nur hochgeladen, wenn es sich um eine Produktion handelt. Wenn es nicht bestimmt wird, wird es auch hochgeladen, wenn das Projekt ausgeführt wird. Dies wird für die Online-Protokollausgabe nicht benötigt und kann gelöscht werden. config.plugin("sentry").use(SentryCliPlugin, [{
        ignorieren: ['node_modules'],
        include: /\.map$/, //Dist-Datei js hochladen
        configFile: 'sentry.properties', // Adresse der Konfigurationsdatei, diese muss dort vorhanden sein. Ich bin hier auf die Grube getreten und habe vergessen, sie aufzuschreiben, was dazu führt, dass die Quellkarte nicht hochgeladen werden kann.
        release: '[email protected]', //Versionsnummer, selbst definierte Variable, die gesamte Versionsnummer muss im Projekt übereinstimmen deleteAfterCompile: true,
        urlPrefix: '~/wx_vue/' //cdn JS Codepfad-Präfix}])
    }
  }
}