vue.config.js打包優化配置

阿新 • • 發佈：2021-04-26

百度上的資料五花八門讓人眼花繚亂，別急，這時候我替你親身經歷了，有需要的可以參考下，先上效果圖，以免你們以為我吹牛逼，嘻嘻

優化方向
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.www.cppcns.comcom/qs/6.5.1/qs.min.js','https://cdn.jsdelivr.net/npm/[email protected]/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,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-roTPNoJRq 
uter': '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,//熱載入
www.cppcns.com    host: 'localhost',//ip地址
    port: 8085,//埠
    https: false,www.cppcns.com //false關閉https，true為開啟www.cppcns.com
    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: '[email protected]',//版本號，自己定義的變數，整個版本號在專案裡面一定要對應
        deleteAfterCompile: true,urlPrefix: '~/wx_vue/' //cdn js的程式碼路徑字首
      }])
    }
  }
}

vue3 vue.config.js相對於vue2的話呢，更加簡潔，你需要什麼的操作，你得自己配置，增加自己的動手能力，除了一些語法上的改變，在有些寫法上還是差不多的！打包優化的路還長，下次接著更

到此這篇關於vue.config.js打包優化配置的文章就介紹到這了,更多相關vue.config.js打包優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

vue.config.js打包優化配置

百度上的資料五花八門讓人眼花繚亂，別急，這時候我替你親身經歷了，有需要的可以參考下，先上效果圖，以免你們以為我吹牛逼，嘻嘻

關於vue.config.js 的 proxy 配置

關於vue.config.js 的 proxy 配置有的同學不怎麼明白專案裡面有的配置了 pathRewrite 地址重寫，有的又沒有進行配置？/*

vue2.x 從vue.config.js配置到專案優化

vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service 自動載入。你也可以使用 package.json 中的 vue 欄位，但是注意這種寫法需要你嚴格遵

vue: p24 專案打包相關配置：webpack.config.js 配置和 package.json

1.打包配置package.json \"scripts\": { \"dev\": \"webpack serve\", //冒號前可隨意命名，冒號後必須固定

vue.config.js中配置Vue的路徑別名的方法

在官方的vue-cli配置參考中存在一個configureWebpack webpack中有一個配置路徑別名的屬性

Vue CLI4 Vue.config.js標準配置(最全註釋)

前言： Vue.js CLI工具不知不覺發展到了4.0時代，CLI給人最直白的感受是沒有了build資料夾跟config資料夾，所有的配置都在Vue.config.js完成。那麼該檔案的配置至關重要。現在我們來看一下最新配置是怎麼配置的。

如何配置vue.config.js 處理static資料夾下的靜態檔案

最近開發過程中遇到個小需求，需要根據需求動態配置一些靜態資料，但我不想直接把這個靜態檔案引入進來，build時就會把資料打包到js檔案中，造成js檔案很大；呃呃。。。。（ps:就想給自己找點彆扭）

vue-lic3腳手架配置（vue.config.js）

vue-lic3腳手架配置（vue.config.js publicPath 型別：String 預設：\'/\' 部署應用包時的基本 URL。預設情況下，Vue CLI會假設你的應用是被部署在一個域名的根路徑上，例如https://www.my-app.com/。如果應用被部署

vue.config.js配置詳解

module.exports = { // 部署應用時的基本 URL baseUrl: process.env.NODE_ENV === \'production\' ? \'192.168.60.110:8080\' : \'192.168.60.110:8080\',

Vue.config.js 配置選項

// Vue.config.js 配置選項 module.exports = { // 選項 // 基本路徑 publicPath: \"./\", // 構建時的輸出目錄

vue.config.js的配置與註釋

// vue.config.js const path = require(\'path\'); const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 開啟gzip壓縮，按需引用

Vue vue.config.js 的詳解與配置 (十五)

Vue的 vue.config.js 配置 1. 為什麼要配置 vue.config.js 由於 vue-cli 3 也學習了 rollup 的零配置思路，所以專案初始化後，沒有了以前熟悉的 build 目錄，也就沒有了 webpack.base.config.js、webpack.dev.config