vue-cli3 编译打包文件的压缩优化

前言

相比于vue-cli2,vue-cli3隐藏了很多默认的webpack配置,没有vue-cli2那么一目了然。但是都提供了各部分的修改路口,可以仔细研读下官方文档。
vue-cli3官方文档
真的,如果真的不是业务需要,真的不会去仔细研读官方文档,因为读了也会马上忘掉。但是真的需要的时候,又会第一时刻想起官方文档,看了后才恍然大悟,原来官方文档里都写得一清二楚。内牛满面~~

正文

包含了打包压缩后图片的压缩和js,css文件压缩
首先,安装相关依赖包:

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

 

npm install --save-dev compression-webpack-plugin

然后,在vue.config.js里进行配置(这里附带了上篇文章中ie11兼容es6的处理方法):

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
  publicPath: './',
  chainWebpack: config => {
    // 解决ie11兼容ES6
    config.entry('main').add('babel-polyfill')
    // 开启图片压缩
    config.module.rule('images')
    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    // 开启js、css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
      .use(new CompressionPlugin({
        test:/\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
    }
  },
  transpileDependencies: [
        'biyi-admin', // 指定对第三方依赖包进行babel-polyfill处理
    ]


 

JEECG官方博客 CSDN认证博客专家 机器学习 深度学习 开源达人
专注技术开源,打造开源的JAVA快速开发平台—JEECG(获得CSDN专家访谈,ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等)、免费微信管家平台—JeeWx 捷微(获得2014年微信开发商大会第一名)
已标记关键词 清除标记
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值