vueアプリケーション生産環境のwebpackパッケージ構成最適化

1.console印刷及びdebug情報を削除し、運行速度を速める/build/webpack.prod.conf.jsファイルの構成を変更するには、次のようにします.

const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //       ，   debug   console
          drop_debugger: true,
          drop_console: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
  ]
})

2.mapファイルの生成を禁止し、ソースコードを保護し、同時にパッケージの体積を減らす/config/index.jsファイルの構成を変更するには、次のようにします.

module.exports = {
  build: {
    /**
     * Source Maps
     */
    productionSourceMap: false, //           false，   source map
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map'
  }
}

3.GZIP圧縮を開き、jsとcssファイルの体積をさらに圧縮する/config/index.jsファイルの構成を変更するには、次のようにします.

module.exports = {
  build: {
    //       Gzip   ，           ，  Surge   Netlify      gzip       。
    //       true   ，           compression-webpack-plugin   （          ）：
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true, //    gzip   
    productionGzipExtensions: ['js', 'css']
  }
}

/build/webpack.prod.conf.jsファイルの構成を変更するには、次のようにします.

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      // asset: '[path].gz[query]', //      ：ValidationError: Compression Plugin Invalid Options
      filename: '[path].gz[query]', //  asset     filename     ：TypeError: Cannot read property 'emit' of undefined，      ：npm install --save-dev [email protected]
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

サーバの構成を変更し、Nginxを例に、confディレクトリの下のnginx.confを見つけ、gzipを開き、gzipのタイプを以下のように設定します.

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

Gzipをオンにすると、比較的波乱が発生します.コメント情報をよく確認してください.質問があれば、プラグインの公式ドキュメントを参照してください.compression-webpack-pluginプラグインの公式ドキュメント