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

最新推荐文章于 2024-08-16 15:13:42 发布

codeyun.top

最新推荐文章于 2024-08-16 15:13:42 发布

阅读量7.9k

点赞数 3

分类专栏：优化

原文链接：https://www.jianshu.com/p/5e9c78a6a960

版权

优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

安装相关依赖包：

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处理
    ]
}

更多配置还是多看看cli官方文档