1.vue打包配置圖片壓縮

• (1).安裝第三方包：
  cnpm i image-webpack-loader -D
• (2).配置vue.config.js：

chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  }

2.vue實現(xiàn)打包去除console.log

• (1).安裝插件：
  cnpm install babel-plugin-transform-remove-console -D
• (2).進入項目根目錄下創(chuàng)建babel.config.js文件：

let plugins = [];
if (process.env.NODE_ENV === "production") {    // todo  if判斷是否打包,打包環(huán)境下控制臺去掉console.log,也可去掉if判斷，整個項目不會出現(xiàn)console.log(不建議)
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: plugins
};

• 3.項目打包

• (1).package.json配置：
  開發(fā)調(diào)試： "build:dev": "vue-cli-service build --mode dev" 命令： npm run build:dev
  線上： "build:prod": "vue-cli-service build --mode prod" 命令：npm run build:prod
• (2).打包后如何運行：
  • 安裝依賴：npm i -g serve
  • 啟動打包后的項目：serve dist

• 4.進一步打包壓縮

• (1).安裝插件：
  cnpm install compression-webpack-plugin@1.1.12 -D
• (2).vue.config.js配置：

const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  publicPath: "./", //打包后的路徑
  productionSourceMap: false, //不需要生產(chǎn)環(huán)境的 source map
  // 路徑別名
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("./src"))
      .set("@components", resolve("./src/components"))
      .set("@assets", resolve("./src/assets"))
      .set("@request", resolve("./src/request"));
    // 文件壓縮
    if (process.env.NODE_ENV === "production") {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          algorithm: "gzip", //壓縮方式
          test: productionGzipExtensions, //匹配壓縮文件
          threshold: 10240, //對超過10k的數(shù)據(jù)壓縮
          deleteOriginalAssets: false, //不刪除源文件
        })
      );
    }
  },
};