vue.config.js打包优化配置

百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻

优化方向
1.图片资源压缩
2.将 productionSourceMap 设为 false,map不进行生成
3.cdn配置(可选)
4.代码压缩
5.公共代码抽离(个人感觉没啥用)

未优化之前的 //感觉太大了 抬它

优化之后的

废话不多说了,上代码是重点
这些是必要的下载
/*cnpm install image-webpack-loader --save-dev
cnpm install compression-webpack-plugin --save-dev
cnpm install uglifyjs-webpack-plugin --save-dev */

const path = require('path');
// gzip压缩
const CompressionPlugin = require('compression-webpack-plugin')
//监控日志
const SentryCliPlugin = require('@sentry/webpack-plugin');
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const Version = new Date().getTime();
function resolve(dir) {
  return path.join(__dirname, dir)
}
const cdn = {
  js: [
    // vue必须在第一个
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
    'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
    'https://cdn.bootcss.com/axios/0.18.1/axios.min.js',
    'https://cdn.bootcss.com/qs/6.5.1/qs.min.js',
    'https://cdn.jsdelivr.net/npm/vant@2.5.4/lib/vant.min.js'
  ]
}
module.exports = {
  //部署应用包时的基本 URL
  publicPath: './',

  //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  outputDir: 'wx_vue',

  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: './' + Version + '/assets',

  // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
  lintOnSave: false,

  //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  runtimeCompiler: true,

  // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
  productionSourceMap: false,

  /** 去掉hash */
  filenameHashing: true,

  // pages: {
  //   index: {
  //   	entry: 'src/main.js',
  //     template: 'public/index.html',
  //     filename: 'index.html'
  //   }
  // },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      config.devtool = "source-map";
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
    /** 删除懒加载模块的 prefetch preload,降低带宽压力(使用在移动端) */
    config.plugins.delete("prefetch").delete("preload")
    config.optimization.minimize(true)
    // gzip压缩
    //	      config.plugin("compressionPlugin").use(CompressionPlugin).tap(() => [
    //        {
    //        	filename: '[path].gz[query]',
    //        	algorithm: 'gzip',
    //          test: /\.js$|\.html$|\.css/, //匹配文件名
    //          threshold: 10240, //超过10k进行压缩
    //          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
    //          deleteOriginalAssets: false //是否删除源文件
    //        }
    //      ])
    config.plugins.push(
      new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: false // 删除原文件
      })
    )
    // 公共代码抽离
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: 'all',
            test: /node_modules/,
            name: 'vendor',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100
          },
          common: {
            chunks: 'all',
            test: /[\\/]src[\\/]js[\\/]/,
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true
          },
          runtimeChunk: {
            name: 'manifest'
          }
        }
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        '@c': path.resolve(__dirname, './src/components'),
        'assets': path.resolve(__dirname, '../src/assets')
      }
    },
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'qs': 'Qs',
      'vant': 'Vant'
      //			  'weixin-js-sdk':'weixin-js-sdk',
      //			  'clipboard':'clipboard',
      //			  'qrcodejs2':'qrcodejs2',
      //			  'js-md5':'js-md5'
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: { // 删除注释
              comments: false
            },
            //生产环境自动删除console
            compress: {
              //warnings: false, // 若打包错误,则注释这行
              drop_debugger: true,  //清除 debugger 语句
              drop_console: true,   //清除console语句
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          parallel: true
        })
      ]
    }
  },

  // css相关配置
  css: {
    extract: false,
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': []
      },
      //			less: {
      //			// `globalVars` 定义全局对象,可加入全局变量
      //				globalVars: {
      //						primary: '#333'
      //					}
      //				}
    },
    requireModuleExtension: true,
  },

  // webpack-dev-server 相关配置
  devServer: { // 设置代理
    hot: true, //热加载
    host: 'localhost', //ip地址
    port: 8085, //端口
    https: false, //false关闭https,true为开启
    open: true, //自动打开浏览器
    proxy: {	 //配置多个跨域
      '/api': { //本地
        //target: 'http://172.168.10.150:81/ysol_wx',
        //target: 'http://yishanonline.cn/ysol_wx',
        target: 'https://yishanol.cn/ysol_wx',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  pluginOptions: { // 第三方插件配置
    // ...
  },
  chainWebpack: config => {
    // ============压缩图片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        //{ bypassOnDebug: true }
        mozjpeg: { progressive: true, quality: 65 },  Compress JPEG images
        optipng: { enabled: false },		// Compress PNG images
        pngquant: { quality: [0.65, 0.9], speed: 4 },   // Compress PNG images
        gifsicle: { interlaced: false },		// Compress SVG images
        //					webp: { quality: 75 }
      })
      .end()
    //				config.module.rules.push({
    //			    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    //			    use:[{
    //			        loader: 'image-webpack-loader',
    //			        options: {bypassOnDebug: true}
    //			    }]
    //				})
    // ============压缩图片 end============
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })

    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end();
        config.plugins.delete('prefetch')
      }
    }

    if (process.env.UMI_ENV === 'production') {//当为prod时候才进行sourcemap的上传,如果不判断,在项目运行的打包也会上传 这个为线上日志输出 不需要的可以删除掉
      config.plugin("sentry").use(SentryCliPlugin, [{
        ignore: ['node_modules'],
        include: /\.map$/, //上传dist文件的js
        configFile: 'sentry.properties', //配置文件地址,这个一定要有,踩坑在这里,忘了写导致一直无法实现上传sourcemap
        release: 'release@0.0.1', //版本号,自己定义的变量,整个版本号在项目里面一定要对应
        deleteAfterCompile: true,
        urlPrefix: '~/wx_vue/' //cdn js的代码路径前缀
      }])
    }
  }
}

vue3 vue.config.js相对于vue2的话呢,更加简洁,你需要什么的操作,你得自己配置,增加自己的动手能力,除了一些语法上的改变,在有些写法上还是差不多的!打包优化的路还长,下次接着更

到此这篇关于vue.config.js打包优化配置的文章就介绍到这了,更多相关vue.config.js打包优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 如何配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到

  • vue.config.js中配置Vue的路径别名的方法

    在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以,如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • vue.config.js常用配置详解

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =

  • vue2.x 从vue.config.js配置到项目优化

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载.你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写. 前言 在实际项目中优化也是经常需要做的事情,特别在中大型项目中降低打包体积大小,提高首屏加载时间是必不可少的,同时在面试中也是一个高频问题.本片文章我将从vue.config.js配置到项目优化前后效果

  • vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • vue - vue.config.js中devServer配置方式

    前言 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/

  • vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    参考文档 https://cli.vuejs.org/zh/ 1.安装 npm install -g @vue/cli 2.检查安装 vue -V 3.创建项目 vue create project_name 出现下图信息 4.上图两种选择方式,第一种是默认的,第二种自己选择配置  这里一般选择第二种自己配置,点击回车键后出现下图信息 5.在上图中选择你需要的模块,上下移动,空格进行确定,下图是测试选择的 6.选好后,敲Enter键,接着选择 7.选择完毕后,一路Enter,到下图 8.模板创建

  • vue.config.js完整配置教程

    目录 引言 1 介绍 查看默认的webpack配置 vue.config.js文件 2 基本配置 3 插件及规则的配置 4 规则rules的配置 4.1 rules的新增 4.2 rules的修改 5 插件plugins 的配置 5.1 plugins的新增 5.2 plugins的修改 5.3 plugins的删除 6 一些常见的配置 6.1 修改enter文件 6.2 DefinePlugin 6.3 自定义filename 及 chunkFilename 6.4 修改html-webpac

  • vueCli4如何配置vue.config.js文件

    目录 vueCli4配置vue.config.js vueCli4配置文件路径别名及使用 项目根目录下创建vue.config.js文件 配置文件中写入一下代码 别名的使用 vueCli4配置vue.config.js const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //cnpm install --save-dev compression-webpack-p

  • @vue/cli4.x版本的vue.config.js常用配置方式

    目录 @vue/cli4.x的vue.config.js常用配置 vue-cli4.*配置vue.config.js文件配置内容不生效 解决 @vue/cli4.x的vue.config.js常用配置 设置访问端口号.访问IP地址.跨域代理,路径别名 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

随机推荐