vue 配置

去除 console log

注意：使用 uglifyjs-webpack-plugin 插件打包会报错

1. 配置optimization.minimizer

if (process.env.VUE_APP_CONSOLE === "true") {
  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
  config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
}

2. 使用babel-plugin-transform-remove-console

安装：npm install babel-plugin-transform-remove-console --save-dev

配置：babel.config.js

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
// 生产环境移除console
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  plugins: plugins,
  presets: [
    [
      '@vue/app', {
        modules: false,
        targets: {
          browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
        },
        useBuiltIns: 'entry',
      }
    ]
  ]
}

优点：打包体积小

图片压缩

1. url-loader

chainWebpack: (config) => {
    const imagesRule = config.module.rule("images")
    imagesRule
      .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 6144 }))
}

vue-cli3 配置

vue.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: process.env.VUE_APP_BASE_URL,
  devServer: {
    /* 自动打开浏览器 */
    open: false,
    port: 8095,
    proxy: {
      "/proxy": {
        target: "https://baidu..com",
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          "^/proxy": "",
        },
      },
      "/cipher/generate": {
        target: "https://baidu..com", // 密钥服务地址 - 测试环境
        ws: false,
        changeOrigin: true,
        // pathRewrite: {
        //   '^/encrype': '/'
        // }
      },
    },
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  css: {
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/Theme.scss";`,
      },
    },
  },
  // 简单/基础配置，比如引入一个新插件
  configureWebpack: (config) => {
    config.resolve.alias["@asset"] = resolve("src/assets");
    config.resolve.alias["@"] = resolve("src");

    // 删除log
    if (process.env.VUE_APP_CONSOLE === "true") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
    }

    // 按照自己项目需要配置
    config["externals"] = {
      vue: "Vue",
      vuex: "Vuex",
      "vue-router": "VueRouter",
      axios: "axios",
      "crypto-js/crypto-js": "CryptoJS",
      "jsencrypt/bin/jsencrypt": "JSEncrypt",
      echarts: "echarts",
      vant: "vant",
      moment: "moment",
      lodash: "_",
      "vue-awesome-swiper": "VueAwesomeSwiper",
    };
  },
  // 链式配置
  chainWebpack: (config) => {
    // 移除 prefetch 插件
    config.plugins.delete("prefetch");
    // 移除 preload 插件
    config.plugins.delete("preload");

    // 替换 svg loader
    const svgRule = config.module.rule("svg");

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear();

    // 添加要替换的 loader
    svgRule
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .tap((options) => {
        // eslint-disable-next-line no-param-reassign
        options = {
          symbolId: "icon-[name]",
        };
        return options;
      });

    const imagesRule = config.module.rule("images");
    imagesRule
      .use("url-loader")
      .loader("url-loader")
      .tap((options) => Object.assign(options, { limit: 6144 })); // 低于6kb的图片全部被内联，高于6kb的图片会放在单独的img文件夹中
  },
};