vue.config.js パッケージ最適化構成

定数パス = require('path');
// gzip 圧縮 const CompressionPlugin = require('compression-webpack-plugin')
// 監視ログ const SentryCliPlugin = require('@sentry/webpack-plugin');
// コード圧縮 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const Version = new Date().getTime();
関数resolve(dir) {
  path.join(__dirname, dir) を返します
}
定数cdn = {
  js: [
    // vue は最初の 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js' にある必要があります。
    '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'
  ]
}
モジュール.エクスポート = {
  //アプリケーション パッケージを展開するときのベース URL
  パブリックパス: './',

  //vue-cli-service build を実行したときに生成される本番環境ビルドファイルのディレクトリ outputDir: 'wx_vue',

  //生成された静的リソース (js、css、img、フォント) をディレクトリ (outputDir を基準) に配置します。assetsDir: './' + Version + '/assets'、

  // eslint-loader が保存時に @vue/cli-plugin-eslint のインストールをチェックするかどうか lintOnSave: false,

  // ランタイム コンパイラを含む Vue ビルドを使用するかどうか。 trueに設定するとテンプレートが使えるようになる
  ランタイムコンパイラ: true、

  //本番環境でソースマップファイルを生成するかどうか。ソースマップの詳細については末尾を参照してください。productionSourceMap: false、

  /** ハッシュを削除 */
  ファイル名ハッシュ: true、


  // ページ: {
  // 索引： {
  // エントリ: 'src/main.js',
  // テンプレート: 'public/index.html',
  // ファイル名: 'index.html'
  // }
  // },
  Webpack の設定: config => {
    process.env.NODE_ENV === 'production'の場合{
      // 本番環境の設定を変更...
      config.mode = 'プロダクション'
      config.devtool = "ソースマップ";
    } それ以外 {
      // 開発環境の構成を変更します...
      config.mode = '開発'
    }
    /** 帯域幅の負荷を軽減するために遅延読み込みモジュールのプリフェッチ プリロードを削除します (モバイル端末で使用) */
    config.plugins.delete("prefetch").delete("preload")
    config.optimization.minimize(true)
    // gzip 圧縮 // config.plugin("compressionPlugin").use(CompressionPlugin).tap(() => [
    // {
    // ファイル名: '[パス].gz[クエリ]',
    // アルゴリズム: 'gzip',
    // test: /\.js$|\.html$|\.css/, //ファイル名を一致させる// threshold: 10240, //ファイルサイズが10kを超える場合は圧縮する// minRatio: 0.8, //この値より低い圧縮率のリソースのみが処理される// deleteOriginalAssets: false //ソースファイルを削除するかどうか// }
    // ])
    config.plugins.push(
      新しい圧縮プラグイン({
        ファイル名: '[パス].gz[クエリ]',
        アルゴリズム: 'gzip'、
        テスト: /\.js$|\.html$|\.css/,
        しきい値: 10240, // この値より大きいリソースのみが処理されます 10240
        minRatio: 0.8, // この値より低い圧縮率のリソースのみが処理されます deleteOriginalAssets: false // 元のファイルを削除します })
    ）
    // 共通コード抽出 config.optimization = {
      分割チャンク: {
        キャッシュグループ:
          ベンダー：
            チャンク: 'すべて'、
            テスト: /node_modules/,
            名前: 'ベンダー'、
            最小チャンク数: 1,
            最大初期リクエスト数: 5,
            最小サイズ: 0,
            優先度: 100
          },
          一般：
            チャンク: 'すべて'、
            テスト: /[\\/]src[\\/]js[\\/]/,
            名前: 'common',
            最小チャンク数: 2,
            最大初期リクエスト数: 5,
            最小サイズ: 0,
            優先度: 60
          },
          スタイル: {
            名前: 'スタイル',
            テスト: /\.(sa|sc|c)ss$/,
            チャンク: 'すべて'、
            強制: 真
          },
          ランタイムチャンク: {
            名前: 'マニフェスト'
          }
        }
      }
    }
  },
  Webpack を構成する: {
    解決する： {
      エイリアス: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': 解決('src')、
        '@c': パスを解決します(__dirname, './src/components'),
        'assets': path.resolve(__dirname, '../src/assets')
      }
    },
    外部: {
      'vue': 'vue',
      'vuex': 'vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'qs': 'Qs',
      'ヴァント': 'ヴァント'
      // 'weixin-js-sdk': 'weixin-js-sdk',
      // 'クリップボード': 'クリップボード',
      // 'qrcodejs2':'qrcodejs2',
      // 'js-md5':'js-md5'
    },
    最適化：
      最小化:
        新しいUglifyJsPlugin({
          醜いオプション: {
            出力: { // コメントを削除 comments: false
            },
            //本番環境ではコンソールが自動的に削除されます
            圧縮: {
              //warnings: false, // パッケージングが間違っている場合は、この行をコメント化します。drop_debugger: true, // デバッガーステートメントをクリアします。drop_console: true, // コンソールステートメントをクリアします。pure_funcs: ['console.log']
            }
          },
          ソースマップ: false、
          平行: 真
        })
      ]
    }
  },

  // CSS関連の設定 css: {
    抽出: 偽、
    ローダーオプション: {
      スタイラス：
        'URLを解決する': true,
        '輸入'： []
      },
      // 少ない： {
      // // `globalVars` はグローバル変数を追加できるグローバルオブジェクトを定義します // globalVars: {
      // プライマリ: '#333'
      // }
      // }
    },
    モジュール拡張が必要です: true、
  },

  // webpack-dev-server 関連の設定 devServer: { // プロキシを設定 hot: true, // ホットローディング host: 'localhost', // IP アドレス port: 8085, // ポート https: false, // false で https がオフになり、true でオンになります open: true, // ブラウザを自動的に開きます proxy: { // 複数のクロスドメインを設定します '/api': { // ローカル // target: 'http://172.168.10.150:81/ysol_wx',
        //ターゲット: 'http://yishanonline.cn/ysol_wx',
        ターゲット: 'https://yishanol.cn/ysol_wx',
        ws: 真、
        変更元: true、
        パス書き換え: {
          '^/api': ''
        }
      }
    }
  },

  pluginOptions: { // サードパーティプラグインの設定 // ...
  },
  チェーンWebpack: config => {
    // =============picturestart を圧縮する============
    構成モジュール
      .rule('画像')
      .use('イメージウェブパックローダー')
      .loader('イメージwebpackローダー')
      .オプション({
        //{ バイパスオンデバッグ: true }
        mozjpeg: { progressive: true, quality: 65 }, JPEG画像を圧縮する
        optipng: { enabled: false }, // PNG画像を圧縮する
        pngquant: { quality: [0.65, 0.9], speed: 4 }, // PNG画像を圧縮する
        gifsicle: { interlaced: false }, // SVG 画像を圧縮する
        // webp: { 品質: 75 }
      })
      。終わり（）
    // config.module.rules.push({
    // テスト: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    // 使用：[{
    // ローダー: 'image-webpack-loader',
    // オプション: {bypassOnDebug: true}
    // }]
    // })
    // =============画像を圧縮する終了============
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      引数を返す
    })

    /* 分析ツールを追加する */
    process.env.NODE_ENV === 'production'の場合{
      プロセス.env.npm_config_report の場合 {
        設定
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          。終わり（）;
        config.plugins.delete('プリフェッチ')
      }
    }

    if (process.env.UMI_ENV === 'production') { //ソースマップはprodのときのみアップロードされます。決定されていない場合は、プロジェクトの実行時にもアップロードされます。これはオンラインログ出力には必要ないので、削除できます。config.plugin("sentry").use(SentryCliPlugin, [{
        無視: ['node_modules'],
        include: /\.map$/, //distファイルjsをアップロード
        configFile: 'sentry.properties', // 設定ファイルのアドレス、これはそこになければなりません、ここで落とし穴に陥って、書き忘れたため、ソースマップをアップロードできなくなりました
        release: '[email protected]', //バージョン番号、自己定義変数、プロジェクト内のバージョン番号全体が一致している必要があります deleteAfterCompile: true,
        urlPrefix: '~/wx_vue/' //cdn js コード パス プレフィックス}])
    }
  }
}