首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 12, 2020

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项目打包优化配置要点

一、新建项目

使用 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="<%= 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即可，现在的配置是开发环境，在浏览器的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插件对图片压缩优化操作

- Author -

przlovecsdn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
jQuery 性能优化指南（3）
May 21 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Less 安装及基本用法
May 05 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
vue 解决provide和inject响应的问题
Nov 12 #Javascript
vue的$http的get请求要加上params操作
Nov 12 #Javascript
FuzzyWuzzy(1) 模糊匹配(1) 模型保存加载(1) PyTorch(1) compose(3) moviepy(1) 人工智能(2) opencv(7) 图像处理(1) Pyecharts(7)
You might like
一个完整的php文件上传类实例讲解
2015/10/27 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
关于this和self的使用说明
2010/08/01 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
python妙用之编码的转换详解
2017/04/21 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
基于python代码批量处理图片resize
2020/06/04 Python
IWOOT美国：新奇的小玩意
2018/04/27 全球购物
保时捷设计：Porsche Design
2019/03/30 全球购物
WatchShop法国：英国排名第一的独立手表零售商
2020/02/17 全球购物
大学生英语演讲稿
2014/04/24 职场文书
技术比武方案
2014/05/19 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
2014年党支部承诺书
2014/05/30 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
2015暑假假期总结
2015/07/13 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸