首页
所有分类
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 相关文章推荐
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
ES6新特性七：数组的扩充详解
Apr 21 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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
map(4) 蒙特卡罗(1) 指针(1) 微信小程序(9) vue-esign(1) random(1) WeUI(1) 结构体(1) pdfkit(1) Pillow(2)
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
PHP自定义函数收代码
2010/08/01 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
JavaScript和JQuery实用代码片段（一）
2010/04/07 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
javascript实现连续赋值
2015/08/10 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python爬取抖音视频的实例分析
2021/01/19 Python
英格兰足协官方商店：England Store
2019/07/12 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
年度考核自我鉴定
2013/11/09 职场文书
总经理职责
2013/12/22 职场文书
护士演讲稿范文
2014/01/05 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
新年联欢会主持词
2014/03/27 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
大一新生期末自我评价
2014/09/12 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL