webpack 学习笔记之八,压缩css,js,image资源.
我们已经可以利用 webpack , 将入口文件entry.js 中依赖
样式(import xx.css|xx.less|xx.stylus)
图片(import xxx.jpg| background-image:url(xxxx.png)
js 文件 (import xxx.js)
等打包到 output.filename = bundle.js 中.
并借助 extract-text-webpack-plugin 将多个css文件打包成一个 .css
.js 文件依赖本身就是打包成一个 .js 文件.
图片文件则是依赖 url-loader 并搭配 limit 来选择是输出图片文件,还是编译成 base64.
但上述的代码都不涉及到文件压缩.特别对于css文件和图片文件,本来是啥样,打包出来就是啥样.
为什么要压缩?
在没有使用压缩功能时,文件都是原样输出的.
.css 是啥样,webpack 打包后就是啥样.
.bundle.js 是啥样 ,webpack 打包后就是啥样.
image 多大,webpack打包后就是多大. 即使是 base64,也是按照原图片尺寸大小编码的.
压缩文件可以减少文件大小,对于文本文件,可以去除不必须要的空格和换行.对于图片文件,可以把质量调低.
文件大小小了,网络字节量也就小了.用户下载速度就会变快.
1. 压缩js文件
压缩js文件其实很简单.
无非就是利用 webpack 自带的 webpack.optimize.UglifyJsPlugin() 来进行压缩.
step 1.
安装 webpack@3.1.0
npm i --save-dev webpack@3.1.0
step 2.
在webpack.config.js文件中新添加一个插件.
plugins: [
new webpack.optimize.UglifyJsPlugin() // 压缩js文件]
step 3.
执行 npm run build
未压缩前的代码.
image.png
大小 2.5KB.
压缩后的代码
image.png
压缩后的代码 501 bytes.
查看一下压缩后的bundle.js文件.
image.png
安装npm i --save-dev webpack@3.1.0
在webpack.config.js文件的 plugins 节点中,配置 new webpack.optimize.UglifyJsPlugin() 即可完成js文件压缩.
压缩css文件.
首先,我们需要将 css 文件单独打包.
所以要先安装 extract-text-webpack-plugin@3.0.2.
step 1.
npm i --save-dev extract-text-webpack-plugin@3.0.2
step 2.
安装压缩 css 文件的插件 optimize-css-assets-webpack-plugin@3.2.0
npm i --save-dev optimize-css-assets-webpack-plugin@3.2.0
在 webpack.config.js 中配置这两个插件.
const ExtractTextPlugin = require('extract-text-webpack-plugin') // css文件单独打包
const OptimizeCssplugin = require('optimize-css-assets-webpack-plugin') // 压缩css文件
- 将 css 文件单独打包
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
plugins:[ new ExtractTextPlugin('css/style.css') //指定单独打包的css文件存储路径和名字 ]
然后执行 npm run build
image.png
在配置 css压缩插件时,文件大小是2.4KB.
- 压缩 css 文件.
plugins:[
new ExtractTextPlugin('css/style.css'), // 指定单独打包的css文件存储路径和名字
new OptimizeCssplugin() // 压缩 css 文件]
运行 npm run build
image.png
压缩后的css文件大小是 1.1KB
打开压缩后的 css 文件查看.
image.png
安装optimize-css-assets-webpack-plugin@3.2.0
在webpack.config.js的plugins节点中.配置new OptimizeCssplugin()即可压缩css文件.
压缩图片文件
我们需要依赖 url-loader@1.1.2 file-loader@2.0.0 处理在webpack打包依赖时碰到 import xxx.jpg|png|xxx 时的图片文件.
不过在url-loader处理这些模块之前, 可以使用 image-webpack-loader@4.6.0 先来进行缩这些文件.
step 1.
npm i --save-devi url-loader@1.1.2 file-loader@2.0.0 image-webpack-loader@4.6.0
**step 2. **
在 webpack.config.js 中设置如下配置.
{
test: /\.(jpg|jpeg|png|git|webp|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 100, // 小于100kb --> url --> base64编码
// 这里如果只写一个文件名,那么图片将打包到 entry.output.path 路径下,也就是 dist/name.ext
// name: '[name].[ext]',// 大于100KB 把 url(xx) 替换成 ../images/[name].[ext]
// 如果,这里写的名字包含路径,那么也是相对于 entry.ouput.path 路径
// 同时这个名字将会作为生成的css中url中的图片地址.
name:'images/[name].[ext]', // -> 存储路径是 dist/images/name.ext
publicPath: '/webpack-demo-img/dist/' // 加上这个配置,就等于是 pulblicPath + name = css.url中的链接地址.
}
},
{
// 图片文件压缩
loader: 'image-webpack-loader',
options: {
disable: false, // 启用.
// jpg图片如何压缩
mozjpeg: {
progressive: true,
quality: 70
}
}
}
]
}
step 3.
在项目中添加一个原图大小为 902KB 的图片.
image.png
在 index.js 导入这张图片
image.png
step 4.
执行 npm run build 进行打包.
image.png
一张原图大小为 902KB 的图片最终被压缩成了 206KB
当执行webpack打包命令时.
- 它在
index.js中碰到了import './assets/image/beijing.jpg' - 模块后缀名是:
.jpg. - 于是首先将模块内容,也就是图片交给
image-webpack-loader来处理. 图片文件从原来的 902KB 压缩成了206KB. - 接着把这个压缩后大小为
206KB的文件,交给url-loader. -
url-loader根据自身配置的options.limit来决定把图片移动到dist/images/目录,还是编码成base64的格式.
安装 image-webpack-loader@4.6.0
在后缀名为(jpg|pngxxx)的rule下配置以下代码即可完成图片的压缩.
// 上面是url-loader的配置
{
// 图片文件压缩
loader: 'image-webpack-loader',
options: {
disable: false, // 启用.
// jpg图片如何压缩
mozjpeg: {
progressive: true,
quality: 70
}
}
}
