vue打包通过image-webpack-loader插件对图片压缩优化操作_vue打包报错:writeeof资源-CSDN文库

版权申诉

179 浏览量 2021-01-18 19:13:37 上传评论收藏 68KB PDF 举报

资源推荐

资源详情

资源评论

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

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

一、新建项目一、新建项目

使用 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) 先安装依赖：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============

}

剩余6页未读，继续阅读

内容反馈

版权申诉

weixin_38725625

粉丝: 3
资源: 919

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip