vue项目中使用image-webpack-loader如何实现对图片进行压缩

这篇文章给大家介绍vue项目中使用image-webpack-loader如何实现对图片进行压缩,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

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

<强>步骤1:

npm安装image-webpack-loader——save-dev

<强>步骤2:

在构建/webpack.base.conf。js中改如下配置

模块。出口={ 　　 　　模块:{ 　　{ 　　测试:/\。(png | jpe& # 63; g | gif | svg)(\, # 63;。*), # 63;美元/,//加载程序:& # 39;url-loader& # 39;//选择:{//限制:100000//名称:utils.assetsPath (& # 39; img/[名字]。[散列:7]。[ext] & # 39;)//} 　　装载机:[& # 39;url-loader& # 63;限制=10000,name=& # 39;+ utils.assetsPath (& # 39; img/[名字]。[散列:7]。[ext] & # 39;), 　　& # 39;image-webpack-loader& # 39; 　　] 　　}, 　　 　　 　　] 　　}, 　　}

<>强vuecli3项目打包优化配置要点

一、新建项目

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

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

模块。出口={}

二,正式优化

<强> 1,将productionSourceMap设为假

(1)在vue.config.js中模块。出口写入:

模块。出口={ 　　productionSourceMap:假 　　}

<强> 2,图片压缩

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

(1)先安装依赖:cnpm安装image-webpack-loader——save-dev

(2)在vue.config.js中模块。出口写入:

模块。出口={ 　　productionSourceMap:假的, 　　chainWebpack:配置=比;{//============压缩图片开始============config.module 　　.rule(& # 39;图像# 39;) 　　.use (& # 39; image-webpack-loader& # 39;) 　　.loader (& # 39; image-webpack-loader& # 39;) 　　.options ({bypassOnDebug:真}) 　　指标(最终)//============压缩图片结束============} 　　}

<强> 3,cdn配置(可选)

(1)在vue.config。js最上边写入:

//是否为生产环境
　　const isProduction=process.env。NODE_ENV !==& # 39;发展# 39;//本地环境是否需要使用的cdn
　　const devNeedCdn=false//cdn链接
　　const cdn={//cdn:模块名称和模块作用域命名(对应的窗口里面挂载的变量名称)
　　外部:{
　　vue: & # 39; vue # 39;
　　vuex: & # 39; Vuex& # 39;
　　& # 39;vue-router& # 39;: & # 39; VueRouter& # 39;
　　},//cdn的css链接
　　css: [],//cdn的js链接
　　js: [
　　& # 39;https://cdn.staticfile.org/vue/2.6.10/vue.min.js& # 39;
　　& # 39;https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js& # 39;
　　& # 39;https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js& # 39;
　　]
　　}

(2)在vue.config。js模块。出口chainWebpack中写入:

//============注入cdn开始============config.plugin (& # 39; html # 39;)。水龙头(args=比;{//生产环境或本地需要cdn时,才注入cdn 　　如果(isProduction | | devNeedCdn)参数[0]。cdn=cdn 　　返回参数 　　})//============注入cdn开始============

(3)在vue.config。js模块。出口configureWebpack中写入:

configureWebpack:配置=比;{//用cdn方式引入,则构建时要忽略相关资源 　　如果(isProduction | | devNeedCdn)配置。外部=cdn.externals 　　}

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

//是否为生产环境
　　const isProduction=process.env。NODE_ENV !==& # 39;发展# 39;//本地环境是否需要使用的cdn
　　const devNeedCdn=false//cdn链接
　　const cdn={//cdn:模块名称和模块作用域命名(对应的窗口里面挂载的变量名称)
　　外部:{
　　vue: & # 39; vue # 39;
　　vuex: & # 39; Vuex& # 39;
　　& # 39;vue-router& # 39;: & # 39; VueRouter& # 39;
　　},//cdn的css链接
　　css: [],//cdn的js链接
　　js: [
　　& # 39;https://cdn.staticfile.org/vue/2.6.10/vue.min.js& # 39;
　　& # 39;https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js& # 39;
　　& # 39;https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js& # 39;
　　]
　　}
　　
　　模块。出口={
　　productionSourceMap:假的,
　　chainWebpack:配置=比;{//============压缩图片开始============config.module
　　.rule(& # 39;图像# 39;)
　　.use (& # 39; image-webpack-loader& # 39;)
　　.loader (& # 39; image-webpack-loader& # 39;)
　　.options ({bypassOnDebug:真})
　　指标(最终)//============压缩图片结束============//============注入cdn开始============config.plugin (& # 39; html # 39;)。水龙头(args=比;{//生产环境或本地需要cdn时,才注入cdn
　　如果(isProduction | | devNeedCdn)参数[0]。cdn=cdn
　　返回参数
　　})//============注入cdn开始============},
　　configureWebpack:配置=比;{//用cdn方式引入,则构建时要忽略相关资源
　　如果(isProduction | | devNeedCdn)配置。外部=cdn.externals
　　}
　　}
vue项目中使用image-webpack-loader如何实现对图片进行压缩