技术改变生活

Technology changes life,Life-long learning

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

step 2.

webpack.config.js文件中新添加一个插件.

step 3.

执行 npm run build

未压缩前的代码.

《webpack 学习笔记之八,压缩css,js,image资源.》

image.png

大小 2.5KB.

压缩后的代码

《webpack 学习笔记之八,压缩css,js,image资源.》

image.png

压缩后的代码 501 bytes.

查看一下压缩后的bundle.js文件.

《webpack 学习笔记之八,压缩css,js,image资源.》

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.

step 2.

安装压缩 css 文件的插件 optimize-css-assets-webpack-plugin@3.2.0

webpack.config.js 中配置这两个插件.

  • 将 css 文件单独打包

然后执行 npm run build

《webpack 学习笔记之八,压缩css,js,image资源.》

image.png

在配置 css压缩插件时,文件大小是2.4KB.

  • 压缩 css 文件.

运行 npm run build

《webpack 学习笔记之八,压缩css,js,image资源.》

image.png

压缩后的css文件大小是 1.1KB

打开压缩后的 css 文件查看.

《webpack 学习笔记之八,压缩css,js,image资源.》

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.

**step 2. **

webpack.config.js 中设置如下配置.

step 3.

在项目中添加一个原图大小为 902KB 的图片.

《webpack 学习笔记之八,压缩css,js,image资源.》

image.png

index.js 导入这张图片

《webpack 学习笔记之八,压缩css,js,image资源.》

image.png

step 4.

执行 npm run build 进行打包.

《webpack 学习笔记之八,压缩css,js,image资源.》

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下配置以下代码即可完成图片的压缩.

原文始发于:webpack 学习笔记之八,压缩css,js,image资源.

点赞