vue-cli3 编译打包文件的压缩优化
生活随笔
收集整理的這篇文章主要介紹了
vue-cli3 编译打包文件的压缩优化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
相比于vue-cli2,vue-cli3隱藏了很多默認的webpack配置,沒有vue-cli2那么一目了然。但是都提供了各部分的修改路口,可以仔細研讀下官方文檔。
vue-cli3官方文檔
真的,如果真的不是業務需要,真的不會去仔細研讀官方文檔,因為讀了也會馬上忘掉。但是真的需要的時候,又會第一時刻想起官方文檔,看了后才恍然大悟,原來官方文檔里都寫得一清二楚。內牛滿面~~
正文
包含了打包壓縮后圖片的壓縮和js,css文件壓縮
首先,安裝相關依賴包:
?
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 编译打包文件的压缩优化的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 保险极客CTO叶晖谈企业团体险的星辰大海
- 下一篇: Vue、element-ui的reset