首页
所有分类
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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
for循环 + setTimeout 结合一些示例(前端面试题）
Aug 30 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
javascript canvas API内容整理
Feb 16 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
德生PL330(2) L4X25T(1) D1875(1) 飞利浦(2) SANGEAN(1) ATS-909X(1) PHILIPS(3) 山进(2) Grundig(1) D1835(1)
You might like
1 Tube Radio
2021/03/02 无线电
咖啡因含量是由谁决定的？低因咖啡怎么来？低因咖啡适合什么人喝
2021/03/06 新手入门
PHP时间戳使用实例代码
2008/06/07 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery选择器使用详解
2014/04/08 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
python自带的http模块详解
2016/11/06 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
读书月活动方案
2014/05/22 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2016年感恩节寄语
2015/12/07 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL