vue打包通过image-webpack-loader插件对图片压缩优化操作

2023-07-12 09:06:04 308

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

step1：

npminstallimage-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项目打包优化配置要点

一、新建项目

使用vue-cli3构建一个初始的Vue项目

因为使用了cli3，很多目录结构不见了，而相关配置是放在vue.config.js里面的，因此在根目录，新建一个vue.config.js

module.exports={}

二、正式优化

1、将productionSourceMap设为false

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

module.exports={
productionSourceMap:false
}

2、图片压缩

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

(1)先安装依赖：cnpminstallimage-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最上边写入：

//是否为生产环境
constisProduction=process.env.NODE_ENV!=='development'

//本地环境是否需要使用cdn
constdevNeedCdn=false

//cdn链接
constcdn={
//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.jsmodule.exportschainWebpack中写入：

//============注入cdnstart============
config.plugin('html').tap(args=>{
//生产环境或本地需要cdn时，才注入cdn
if(isProduction||devNeedCdn)args[0].cdn=cdn
returnargs
})
//============注入cdnstart============

(3)在vue.config.jsmodule.exportsconfigureWebpack中写入：

configureWebpack:config=>{
//用cdn方式引入，则构建时要忽略相关资源
if(isProduction||devNeedCdn)config.externals=cdn.externals
}

(4)当前配置的vue.config.js

//是否为生产环境
constisProduction=process.env.NODE_ENV!=='development'

//本地环境是否需要使用cdn
constdevNeedCdn=false

//cdn链接
constcdn={
//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============

//============注入cdnstart============
config.plugin('html').tap(args=>{
//生产环境或本地需要cdn时，才注入cdn
if(isProduction||devNeedCdn)args[0].cdn=cdn
returnargs
})
//============注入cdnstart============
},
configureWebpack:config=>{
//用cdn方式引入，则构建时要忽略相关资源
if(isProduction||devNeedCdn)config.externals=cdn.externals
}
}

(5)在publicindex.html写入







favicon.ico"/>

<%for(variinhtmlWebpackPlugin.options.cdn&&
htmlWebpackPlugin.options.cdn.css){%>

<%}%>

cli3_base

<%for(variinhtmlWebpackPlugin.options.cdn&& htmlWebpackPlugin.options.cdn.js){%> "> <%}%>

(6)重启项目npmrunserve

(7)在src/router.js修改

将

Vue.use(Router)

改为

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

(8)重新启动npmrunserve即可，现在的配置是开发环境，在浏览器的NetworkJS里面是看不到的。若想查看，请将vue.config.js里面的

//本地环境是否需要使用cdn

constdevNeedCdn=false

改为

//本地环境是否需要使用cdn

constdevNeedCdn=true

然后再次重启npmrunserve，然后浏览器查看NetworkJS

NetworkJS

4、代码压缩

(1)安装依赖：cnpmi-Duglifyjs-webpack-plugin

(2)在vue.config.js最上边引入依赖

//代码压缩

constUglifyJsPlugin=require('uglifyjs-webpack-plugin')

(3)在vue.config.jsmodule.exportsconfigureWebpack里面新增

//生产环境相关配置
if(isProduction){
//代码压缩
config.plugins.push(
newUglifyJsPlugin({
uglifyOptions:{
//生产环境自动删除console
compress:{
warnings:false,//若打包错误，则注释这行
drop_debugger:true,
drop_console:true,
pure_funcs:['console.log']
}
},
sourceMap:false,
parallel:true
})
)
}

5、开启Gzip

(1)安装依赖：cnpminstall--save-devcompression-webpack-plugin

(2)在vue.config.js顶部引入依赖

//gzip压缩

constCompressionWebpackPlugin=require('compression-webpack-plugin')

(3)在vue.config.jsmodule.exportsconfigureWebpack里面新增，直接放在代码压缩下边即可

//生产环境相关配置
if(isProduction){
//代码压缩
//..................
//gzip压缩
constproductionGzipExtensions=['html','js','css']
config.plugins.push(
newCompressionWebpackPlugin({
filename:'[path].gz[query]',
algorithm:'gzip',
test:newRegExp(
'\\.('+productionGzipExtensions.join('|')+')$'
),
threshold:10240,//只有大小大于该值的资源会被处理10240
minRatio:0.8,//只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets:false//删除原文件
})
)
}

6、公共代码抽离

(1)在vue.config.jsmodule.exportsconfigureWebpack里面新增，直接放在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

//代码压缩
constUglifyJsPlugin=require('uglifyjs-webpack-plugin')

//gzip压缩
constCompressionWebpackPlugin=require('compression-webpack-plugin')

//是否为生产环境
constisProduction=process.env.NODE_ENV!=='development'

//本地环境是否需要使用cdn
constdevNeedCdn=true

//cdn链接
constcdn={
//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============

//============注入cdnstart============
config.plugin('html').tap(args=>{
//生产环境或本地需要cdn时，才注入cdn
if(isProduction||devNeedCdn)args[0].cdn=cdn
returnargs
})
//============注入cdnstart============
},
configureWebpack:config=>{
//用cdn方式引入，则构建时要忽略相关资源
if(isProduction||devNeedCdn)config.externals=cdn.externals

//生产环境相关配置
if(isProduction){
//代码压缩
config.plugins.push(
newUglifyJsPlugin({
uglifyOptions:{
//生产环境自动删除console
compress:{
warnings:false,//若打包错误，则注释这行
drop_debugger:true,
drop_console:true,
pure_funcs:['console.log']
}
},
sourceMap:false,
parallel:true
})
)

//gzip压缩
constproductionGzipExtensions=['html','js','css']
config.plugins.push(
newCompressionWebpackPlugin({
filename:'[path].gz[query]',
algorithm:'gzip',
test:newRegExp(
'\\.('+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插件对图片压缩优化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vue打包通过image-webpack-loader插件对图片压缩优化操作

一、新建项目

二、正式优化

热门推荐

随机推荐