前言

相比于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兼容ES6config.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處理]

?

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的vue-cli3 编译打包文件的压缩优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。