vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作
更新時間：2020年11月12日 11:14:44 作者：przlovecsdn
這篇文章主要介紹了vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進行壓縮從而縮小打包體積
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'
]
},
]
},
}
補充知識：vuecli3項目打包優(yōu)化配置要點
一、新建項目
使用 vue-cli3 構建一個初始的Vue項目
因為使用了cli3，很多目錄結構不見了，而相關配置是放在vue.config.js里面的，因此在根目錄，新建一個vue.config.js
module.exports = {}
二、正式優(yōu)化
1、將 productionSourceMap 設為 false
(1) 在vue.config.js中module.exports寫入：
module.exports = {
productionSourceMap: false
}
2、圖片壓縮
vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進行壓縮從而縮小打包體積
(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 最上邊寫入：
// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development'
// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false
// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應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'
]
}
(2) 在vue.config.js module.exports chainWebpack中寫入：
// ============注入cdn start============
config.plugin('html').tap(args => {
// 生產(chǎn)環(huán)境或本地需要cdn時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
(3) 在vue.config.js module.exports configureWebpack中寫入：
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
if (isProduction || devNeedCdn) config.externals = cdn.externals
}
(4) 當前配置的vue.config.js
// 是否為生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV !== 'development'
// 本地環(huán)境是否需要使用cdn
const devNeedCdn = false
// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應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時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
},
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
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="<%= BASE_URL %>favicon.ico" />
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
rel="stylesheet"
/>
<% } %>
<!-- 使用CDN的CSS文件 -->
<title>cli3_base</title>
</head>
<body>
<noscript>
<strong
>We're sorry but cli3_base doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->
<!-- built files will be auto injected -->
</body>
</html>
(6) 重啟項目npm run serve
(7) 在src/router.js修改
將
Vue.use(Router)
改為
if (!window.VueRouter) Vue.use(Router)
(8) 重新啟動npm run serve即可，現(xiàn)在的配置是開發(fā)環(huán)境，在瀏覽器的Network JS里面是看不到的。若想查看，請將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)境相關配置
if (isProduction) {
// 代碼壓縮
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生產(chǎn)環(huán)境自動刪除console
compress: {
warnings: false, // 若打包錯誤，則注釋這行
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)境相關配置
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, // 只有大小大于該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理
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)境是否需要使用cdn
const devNeedCdn = true
// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應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時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
},
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
if (isProduction || devNeedCdn) config.externals = cdn.externals
// 生產(chǎn)環(huán)境相關配置
if (isProduction) {
// 代碼壓縮
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生產(chǎn)環(huán)境自動刪除console
compress: {
warnings: false, // 若打包錯誤，則注釋這行
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, // 只有大小大于該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理
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插件對圖片壓縮優(yōu)化操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面打印自動分頁的兩種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
使用Vue寫一個todoList事件備忘錄經(jīng)典小案例
學習了幾天Vue之后終于迎來了第一個小案例,todoList是非常常見地一個小案例,下面這篇文章主要給大家介紹了關于使用Vue寫一個todoList事件備忘錄經(jīng)典小案例的相關資料,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了vue如何從接口請求數(shù)據(jù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實現(xiàn)
當面對大量數(shù)據(jù)時,一次性加載所有數(shù)據(jù)可能會導致性能問題,我們可以實現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了vue-plugin-hiprint 詳細使用說明,使用Vue.Draggable庫構建可拖拽元素的示例,你可以根據(jù)具體需求和技術選型選擇適合的庫或方法來實現(xiàn)可拖拽元素的功能,需要的朋友可以參考下2023-08-08
使用Element的InfiniteScroll 無限滾動組件報錯的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報錯的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)面包屑導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了Vue滑塊解鎖組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Proxy是ES6引入的一個新特性，它允許你創(chuàng)建一個代理對象，用于攔截對目標對象的訪問，但用了這么久的vue3，你真的懂Proxy嗎，本文就來和大家深入聊聊Proxy吧2023-06-06
這篇文章主要為大家詳細介紹了VUE+SpringBoot實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06