Webpack 层面的优化

Webpack 层面的优化

Webpack 对图片进行压缩

在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片：
（1）首先，安装 image-webpack-loader ：
npm install image-webpack-loader --save-dev
复制代码（2）然后，在 webpack.base.conf.js 中进行配置：
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
use:[
{
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)
}
},
{
loader: ‘image-webpack-loader’,
options: {
bypassOnDebug: true,
}
}
]
}