文章詳情頁

vue打包通過image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作

【字号：大中小】作者：豬豬瀏覽：17日期：2022-10-30 17:12:28

vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進(jìn)行壓縮從而縮小打包體積

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’ ] }, ] },}

補(bǔ)充知識(shí)：vuecli3項(xiàng)目打包優(yōu)化配置要點(diǎn)

一、新建項(xiàng)目

使用 vue-cli3 構(gòu)建一個(gè)初始的Vue項(xiàng)目

因?yàn)槭褂昧薱li3，很多目錄結(jié)構(gòu)不見了，而相關(guān)配置是放在vue.config.js里面的，因此在根目錄，新建一個(gè)vue.config.js

module.exports = {}

二、正式優(yōu)化

1、將 productionSourceMap 設(shè)為 false

(1) 在vue.config.js中module.exports寫入：

module.exports = { productionSourceMap: false}

2、圖片壓縮

vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進(jìn)行壓縮從而縮小打包體積

(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 最上邊寫入：

(2) 在vue.config.js module.exports chainWebpack中寫入：

// ============注入cdn start============config.plugin(’html’).tap(args => { // 生產(chǎn)環(huán)境或本地需要cdn時(shí)，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args})// ============注入cdn start============

(3) 在vue.config.js module.exports configureWebpack中寫入：

configureWebpack: config => { // 用cdn方式引入，則構(gòu)建時(shí)要忽略相關(guān)資源 if (isProduction || devNeedCdn) config.externals = cdn.externals}

(4) 當(dāng)前配置的vue.config.js

// 是否為生產(chǎn)環(huán)境const isProduction = process.env.NODE_ENV !== ’development’// 本地環(huán)境是否需要使用cdnconst devNeedCdn = false// cdn鏈接const cdn = { // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)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 => { // 生產(chǎn)環(huán)境或本地需要cdn時(shí)，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ }, configureWebpack: config => { // 用cdn方式引入，則構(gòu)建時(shí)要忽略相關(guān)資源 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='http://www.aoyou183.cn/bcjs/<%= BASE_URL %>favicon.ico' />  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href='http://www.aoyou183.cn/bcjs/<%= htmlWebpackPlugin.options.cdn.css[i] %>' rel='stylesheet' /> <% } %>  <title>cli3_base</title> </head> <body> <noscript> <strong>We’re sorry but cli3_base doesn’t work properly withoutJavaScript enabled. Please enable it to continue.</strong > </noscript> <div id='app'></div>  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src='http://www.aoyou183.cn/bcjs/<%= htmlWebpackPlugin.options.cdn.js[i] %>'></script> <% } %>   </body></html>

(6) 重啟項(xiàng)目npm run serve

(7) 在src/router.js修改

將

Vue.use(Router)

改為

if (!window.VueRouter) Vue.use(Router)

(8) 重新啟動(dòng)npm run serve即可，現(xiàn)在的配置是開發(fā)環(huán)境，在瀏覽器的Network JS里面是看不到的。若想查看，請(qǐng)將vue.config.js里面的

// 本地環(huán)境是否需要使用cdn

const devNeedCdn = false

改為

// 本地環(huán)境是否需要使用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 里面新增

// 生產(chǎn)環(huán)境相關(guān)配置if (isProduction) { // 代碼壓縮 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: {//生產(chǎn)環(huán)境自動(dòng)刪除consolecompress: { warnings: false, // 若打包錯(cuò)誤，則注釋這行 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 里面新增，直接放在代碼壓縮下邊即可

// 生產(chǎn)環(huán)境相關(guān)配置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, // 只有大小大于該值的資源會(huì)被處理 10240 minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理 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’)// 是否為生產(chǎn)環(huán)境const isProduction = process.env.NODE_ENV !== ’development’// 本地環(huán)境是否需要使用cdnconst devNeedCdn = true// cdn鏈接const cdn = { // cdn：模塊名稱和模塊作用域命名（對(duì)應(yīng)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 => { // 生產(chǎn)環(huán)境或本地需要cdn時(shí)，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ }, configureWebpack: config => { // 用cdn方式引入，則構(gòu)建時(shí)要忽略相關(guān)資源 if (isProduction || devNeedCdn) config.externals = cdn.externals // 生產(chǎn)環(huán)境相關(guān)配置 if (isProduction) { // 代碼壓縮 config.plugins.push(new UglifyJsPlugin({ uglifyOptions: { //生產(chǎn)環(huán)境自動(dòng)刪除console compress: { warnings: false, // 若打包錯(cuò)誤，則注釋這行 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, // 只有大小大于該值的資源會(huì)被處理 10240 minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理 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插件對(duì)圖片壓縮優(yōu)化操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。

Vue

上一條：vue 解決mintui彈窗彈起來,底部頁面滾動(dòng)bug問題下一條：在vue中使用image-webpack-loader實(shí)例

相關(guān)文章：

1. JSP servlet實(shí)現(xiàn)文件上傳下載和刪除2. springboot集成與使用Sentinel的方法3. jsp EL表達(dá)式詳解4. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)5. 詳解JSP 內(nèi)置對(duì)象request常見用法6. 如何在jsp界面中插入圖片7. ASP實(shí)現(xiàn)加法驗(yàn)證碼8. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算9. Python matplotlib 繪制雙Y軸曲線圖的示例代碼10. python selenium 獲取接口數(shù)據(jù)的實(shí)現(xiàn)

排行榜

					
					IntelliJ IDEA 統(tǒng)一設(shè)置編碼為utf-8編碼的實(shí)現(xiàn)
IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法
IntelliJ IDEA配置Tomcat服務(wù)器的方法
idea修改背景顏色樣式的方法
Python matplotlib 繪制雙Y軸曲線圖的示例代碼
python selenium 獲取接口數(shù)據(jù)的實(shí)現(xiàn)
如何在jsp界面中插入圖片
ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)
ASP實(shí)現(xiàn)加法驗(yàn)證碼
idea打開多個(gè)窗口的操作方法
利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算
				