vue部署webpack打包优化

主要介绍几个包

• 1、包名称：webpackbar（显示打包进度）

    const WebpackBar = require('webpackbar');
    
    configureWebpack: config => {
        const plugs = [
          new WebpackBar()
        ];
        return{
          plugins:plugs
        }
    }
  

• 2、包名称：compression-webpack-plugin（开启gzip压缩）

    //使用gzip压缩（需服务端<nginx>同时开启gzip_static功能）
    const CompressionPlugin = require('compression-webpack-plugin'); // 使用5x的版本
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
    
    configureWebpack: config => {
        const plugs = [];
        // 开启Gzip压缩
        if(process.env.NODE_ENV === 'production'){
            plugs.push(
                new CompressionPlugin({
                    filename: '[path].gz[query]',//压缩后的文件名
                    algorithm: 'gzip', //压缩算法/功能
                    test: productionGzipExtensions, //匹配项目文件，以js或者以css结尾的才执行压缩
                    threshold: 10240, //仅处理大于此大小的资产（以字节为单位）
                    minRatio: 0.8, //仅压缩比该比率更好的资产（minRatio = Compressed Size / Original Size）
                    deleteOriginalAssets: false //是否删除原始文件
                })
            )
        }
        return{
          plugins:plugs
        }
     }
  

• 3、关闭 vue-cli3预加载

  chainWebpack: config => {
    // 移除 prefetch 插件（关闭预加载）
    config.plugins.delete('prefetch')
  },
  

• 4、代码压缩

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  if(process.env.NODE_ENV === 'production'){
      plugs.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            // 生产环境自动删除console
            compress: {
              dead_code: true, // 移除没被引用的代码
              drop_debugger: true, // 移除 debugger
              drop_console: true, // 移除console函数
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          cache: false, // 是否启用文件缓存,默认的缓存路径为： node_modules/.cache/uglifyjs-webpack-plugin.
          parallel: true // 使用多进程并行运行来提高构建速度
        })
      )
    }
  

说明：添加到vue.config.js中，最终的文件：

//使用gzip压缩（需服务端<nginx>同时开启gzip_static功能）
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

//显示打包进度
const WebpackBar = require('webpackbar');

module.exports = {
  publicPath: '/', // 官方要求修改路径在这里做更改，默认是根目录下，可以自行配置
  outputDir: 'dist', //标识是打包哪个文件
  productionSourceMap: false, // 去除线上调试代码
  devServer: {
    open: true, // 项目构建成功之后，自动弹出页面
    host: 'localhost', // 主机名，也可以127.0.0.0 || 做真机测试时候0.0.0.0
    port: 8081, // 端口号，默认8080
    https: false, // 检查证书协议
    //跨域代理
    proxy: {
      '/api':{
        target:'https://www.xxx.cn',//目标服务器地址
        secure:true,//如果是https接口需要配置此参数
        changeOrigin:true,//允许跨域
        timeout:5000,//设置超时时间cls
        pathRewrite:{
            "^/api":""
        }
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        prependData: `@import "@/assets/css/base.scss";`//新版scss-loader(8.0及以上)
        // data:`@import "@/assets/css/base.scss";`//旧版sass-loader写法(8.0以下)
      }
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = "鲸鱼剧本杀内容管理平台";
      return args;
    })
    // 移除 prefetch 插件（关闭预加载）
    config.plugins.delete('prefetch')
  },
  configureWebpack: config =>{
    const plugs = [
      new WebpackBar()
    ];
    if(process.env.NODE_ENV === 'production'){
      plugs.push(
        // 开启Gzip压缩
        new CompressionPlugin({
          filename: '[path].gz[query]',//压缩后的文件名
          algorithm: 'gzip', //压缩算法/功能
          test: productionGzipExtensions, //匹配项目文件，以js或者以css结尾的才执行压缩
          threshold: 10240, //仅处理大于此大小的资产（以字节为单位）
          minRatio: 0.8, //仅压缩比该比率更好的资产（minRatio = Compressed Size / Original Size）
          deleteOriginalAssets: false //是否删除原始文件
        }),
        // 代码压缩
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            // 生产环境自动删除console
            compress: {
              dead_code: true, // 移除没被引用的代码
              drop_debugger: true, // 移除 debugger
              drop_console: true, // 移除console函数
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          cache: false, // 是否启用文件缓存,默认的缓存路径为： node_modules/.cache/uglifyjs-webpack-plugin.
          parallel: true // 使用多进程并行运行来提高构建速度
        })
      )
    }
    return{
      plugins:plugs
    }
  }
};