溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue項目中使用image-webpack-loader如何實現(xiàn)對圖片進行壓縮

發(fā)布時間：2020-11-16 15:31:18 來源：億速云 閱讀：1202 作者：Leah 欄目：開發(fā)技術

這篇文章給大家介紹vue項目中使用image-webpack-loader如何實現(xiàn)對圖片進行壓縮，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進行壓縮從而縮小打包體積

step1：

npm install image-webpack-loader --save-dev

step2：

在build/webpack.base.conf.js中改如下配置

module.exports = {
 
 module: { 
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    // loader: 'url-loader',
    // options: {
     // limit: 100000,
     // name: utils.assetsPath('img/[name].[hash:7].[ext]')
    // }
    loader: ['url-loader?limit=10000&name=' + utils.assetsPath('img/[name].[hash:7].[ext]'),
     'image-webpack-loader'
    ]
   },
 
   
  ]
 },
}

補充知識：vuecli3項目打包優(yōu)化配置要點

一、新建項目

使用 vue-cli3 構建一個初始的Vue項目

因為使用了cli3，很多目錄結構不見了，而相關配置是放在vue.config.js里面的，因此在根目錄，新建一個vue.config.js

module.exports = {}

二、正式優(yōu)化

1、將 productionSourceMap 設為 false

(1) 在vue.config.js中module.exports寫入：

module.exports = {
  productionSourceMap: false
}

2、圖片壓縮

vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進行壓縮從而縮小打包體積

(1) 先安裝依賴：cnpm install image-webpack-loader --save-dev

(2) 在vue.config.js中module.exports寫入：

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    // ============壓縮圖片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
    // ============壓縮圖片 end============
  }
}

3、cdn配置（可選）

(1) 在vue.config.js 最上邊寫入：

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
  // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱）
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter'
  },
  // cdn的css鏈接
  css: [],
  // cdn的js鏈接
  js: [
    'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
    'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
    'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
  ]
}

(2) 在vue.config.js module.exports chainWebpack中寫入：

// ============注入cdn start============
config.plugin('html').tap(args => {
  // 生產(chǎn)環(huán)境或本地需要cdn時，才注入cdn
  if (isProduction || devNeedCdn) args[0].cdn = cdn
  return args
})
// ============注入cdn start============

(3) 在vue.config.js module.exports configureWebpack中寫入：

configureWebpack: config => {
  // 用cdn方式引入，則構建時要忽略相關資源
  if (isProduction || devNeedCdn) config.externals = cdn.externals
}

(4) 當前配置的vue.config.js

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
  // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱）
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter'
  },
  // cdn的css鏈接
  css: [],
  // cdn的js鏈接
  js: [
    'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
    'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
    'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
  ]
}

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    // ============壓縮圖片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
    // ============壓縮圖片 end============

    // ============注入cdn start============
    config.plugin('html').tap(args => {
      // 生產(chǎn)環(huán)境或本地需要cdn時，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn
      return args
    })
    // ============注入cdn start============
  },
  configureWebpack: config => {
    // 用cdn方式引入，則構建時要忽略相關資源
    if (isProduction || devNeedCdn) config.externals = cdn.externals
  }
}

(5) 在public index.html 寫入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
      href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
      rel="stylesheet"
    />
    <% } %>
    <!-- 使用CDN的CSS文件 -->
    <title>cli3_base</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but cli3_base doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>

    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- 使用CDN的JS文件 -->

    <!-- built files will be auto injected -->
  </body>
</html>

(6) 重啟項目npm run serve

(7) 在src/router.js修改

將

Vue.use(Router)

改為

if (!window.VueRouter) Vue.use(Router)

(8) 重新啟動npm run serve即可，現(xiàn)在的配置是開發(fā)環(huán)境，在瀏覽器的Network JS里面是看不到的。若想查看，請將vue.config.js里面的

// 本地環(huán)境是否需要使用cdn

const devNeedCdn = false

改為

// 本地環(huán)境是否需要使用cdn

const devNeedCdn = true

然后再次重啟npm run serve，然后瀏覽器查看Network JS

Network JS

4、代碼壓縮

(1) 安裝依賴：cnpm i -D uglifyjs-webpack-plugin

(2) 在vue.config.js 最上邊引入依賴

// 代碼壓縮

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

(3) 在vue.config.js module.exports configureWebpack 里面新增

// 生產(chǎn)環(huán)境相關配置
if (isProduction) {
  // 代碼壓縮
  config.plugins.push(
    new UglifyJsPlugin({
      uglifyOptions: {
        //生產(chǎn)環(huán)境自動刪除console
        compress: {
          warnings: false, // 若打包錯誤，則注釋這行
          drop_debugger: true,
          drop_console: true,
          pure_funcs: ['console.log']
        }
      },
      sourceMap: false,
      parallel: true
    })
  )
}

5、開啟Gzip

(1) 安裝依賴：cnpm install --save-dev compression-webpack-plugin

(2) 在vue.config.js 頂部引入依賴

// gzip壓縮

const CompressionWebpackPlugin = require('compression-webpack-plugin')

(3) 在vue.config.js module.exports configureWebpack 里面新增，直接放在代碼壓縮下邊即可

// 生產(chǎn)環(huán)境相關配置
if (isProduction) {
  // 代碼壓縮
  // ..................
  // gzip壓縮
  const productionGzipExtensions = ['html', 'js', 'css']
  config.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' + productionGzipExtensions.join('|') + ')$'
      ),
      threshold: 10240, // 只有大小大于該值的資源會被處理 10240
      minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理
      deleteOriginalAssets: false // 刪除原文件
    })
  )
}

6、公共代碼抽離

(1) 在vue.config.js module.exports configureWebpack 里面新增，直接放在gzip壓縮下邊即可

// 公共代碼抽離
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'
      }
    }
  }
}

完整的vue.config.js

// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地環(huán)境是否需要使用cdn
const devNeedCdn = true

// cdn鏈接
const cdn = {
  // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱）
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter'
  },
  // cdn的css鏈接
  css: [],
  // cdn的js鏈接
  js: [
    'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
    'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
    'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
  ]
}
module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    // ============壓縮圖片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
    // ============壓縮圖片 end============

    // ============注入cdn start============
    config.plugin('html').tap(args => {
      // 生產(chǎn)環(huán)境或本地需要cdn時，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn
      return args
    })
    // ============注入cdn start============
  },
  configureWebpack: config => {
    // 用cdn方式引入，則構建時要忽略相關資源
    if (isProduction || devNeedCdn) config.externals = cdn.externals

    // 生產(chǎn)環(huán)境相關配置
    if (isProduction) {
      // 代碼壓縮
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            //生產(chǎn)環(huán)境自動刪除console
            compress: {
              warnings: false, // 若打包錯誤，則注釋這行
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          parallel: true
        })
      )

      // gzip壓縮
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + productionGzipExtensions.join('|') + ')$'
          ),
          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'
            }
          }
        }
      }
    }
  }
}

關于vue項目中使用image-webpack-loader如何實現(xiàn)對圖片進行壓縮就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手