vue.js - 解決vue-cli打包后自動壓縮代碼

一.webpack中引入的壓縮代碼

/build/webpack.prod.conf.js

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

壓縮js 的插件叫 uglifyjs-webpack-plugin，

壓縮css 的插件叫 optimize-css-assets-webpack-plugin

 

二.OptimizeCSSPlugin 和 UglifyJsPlugin 這兩個關鍵詞所在的地方

1.css 壓縮代碼

　　 // css 壓縮代碼，將下面代碼注釋掉
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

2.壓縮js代碼

　　 // 壓縮js代碼，將下面代碼注釋掉
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

3.html代碼, 將 minify里布爾值改成false

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: false,
        collapseWhitespace: false,
        removeAttributeQuotes: false
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },