vue打包通过image-webpack-loader插件对图片压缩优化操作

网络编程 2024/12/22 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

step1：

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

step2：

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

module.exports = {
 
 module: { 
   {
    test: /\.(png|jpe"color: #ff0000">补充知识：vuecli3项目打包优化配置要点
一、新建项目
使用 vue-cli3 构建一个初始的Vue项目
因为使用了cli3，很多目录结构不见了，而相关配置是放在vue.config.js里面的，因此在根目录，新建一个vue.config.js

module.exports = {}

二、正式优化
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 最上边写入：


// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地环境是否需要使用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 => {
  // 生产环境或本地需要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


// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地环境是否需要使用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 => {
      // 生产环境或本地需要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="/UploadFiles/2021-04-02/<%= htmlWebpackPlugin.options.cdn.js[i] %>">

(6) 重启项目npm run serve
(7) 在src/router.js修改
将

Vue.use(Router)

改为

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

(8) 重新启动npm run serve即可，现在的配置是开发环境，在浏览器的Network JS里面是看不到的。若想查看，请将vue.config.js里面的

// 本地环境是否需要使用cdn
const devNeedCdn = false

改为

// 本地环境是否需要使用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 里面新增


// 生产环境相关配置
if (isProduction) {
  // 代码压缩
  config.plugins.push(
    new UglifyJsPlugin({
      uglifyOptions: {
        //生产环境自动删除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 里面新增，直接放在代码压缩下边即可


// 生产环境相关配置
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')

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地环境是否需要使用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 => {
      // 生产环境或本地需要cdn时，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn
      return args
    })
    // ============注入cdn start============
  },
  configureWebpack: config => {
    // 用cdn方式引入，则构建时要忽略相关资源
    if (isProduction || devNeedCdn) config.externals = cdn.externals

    // 生产环境相关配置
    if (isProduction) {
      // 代码压缩
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            //生产环境自动删除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插件对图片压缩优化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,image-webpack-loader,图片压缩优化

标签：

vue,image-webpack-loader,图片压缩优化

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

评论“vue打包通过image-webpack-loader插件对图片压缩优化操作”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

vue打包通过image-webpack-loader插件对图片压缩优化操作

一、新建项目

二、正式优化

vue,image-webpack-loader,图片压缩优化

vue 解决mintui弹窗弹起来,底部页面滚动bug问题

详解ES6 扩展运算符的使用与注意事项

评论“vue打包通过image-webpack-loader插件对图片压缩优化操作”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

友情链接