我們已經(jīng)可以利用 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 將多個(gè)css文件打包成一個(gè) .css
.js 文件依賴本身就是打包成一個(gè) .js 文件.
圖片文件則是依賴 url-loader 并搭配 limit 來選擇是輸出圖片文件,還是編譯成 base64.
但上述的代碼都不涉及到文件壓縮.特別對(duì)于css文件和圖片文件,本來是啥樣,打包出來就是啥樣.
為什么要壓縮?
在沒有使用壓縮功能時(shí),文件都是原樣輸出的.
.css 是啥樣,webpack 打包后就是啥樣.
.bundle.js 是啥樣 ,webpack 打包后就是啥樣.
image 多大,webpack打包后就是多大. 即使是 base64,也是按照原圖片尺寸大小編碼的.
壓縮文件可以減少文件大小,對(duì)于文本文件,可以去除不必須要的空格和換行.對(duì)于圖片文件,可以把質(zhì)量調(diào)低.
文件大小小了,網(wǎng)絡(luò)字節(jié)量也就小了.用戶下載速度就會(huì)變快.
1. 壓縮js文件
壓縮js文件其實(shí)很簡單.
無非就是利用 webpack 自帶的 webpack.optimize.UglifyJsPlugin() 來進(jìn)行壓縮.
step 1.
安裝 webpack@3.1.0
npm i --save-dev webpack@3.1.0
step 2.
在webpack.config.js文件中新添加一個(gè)插件.
plugins: [
new webpack.optimize.UglifyJsPlugin() // 壓縮js文件]
step 3.
執(zhí)行 npm run build
未壓縮前的代碼.
大小 2.5KB.
壓縮后的代碼
壓縮后的代碼 501 bytes.
查看一下壓縮后的bundle.js文件.
安裝npm i --save-dev webpack@3.1.0
在webpack.config.js文件的 plugins 節(jié)點(diǎn)中,配置 new webpack.optimize.UglifyJsPlugin() 即可完成js文件壓縮.
壓縮css文件.
首先,我們需要將 css 文件單獨(dú)打包.
所以要先安裝 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 中配置這兩個(gè)插件.
const ExtractTextPlugin = require('extract-text-webpack-plugin') // css文件單獨(dú)打包
const OptimizeCssplugin = require('optimize-css-assets-webpack-plugin') // 壓縮css文件
- 將 css 文件單獨(dú)打包
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
plugins:[ new ExtractTextPlugin('css/style.css') //指定單獨(dú)打包的css文件存儲(chǔ)路徑和名字 ]
然后執(zhí)行 npm run build
在配置 css壓縮插件時(shí),文件大小是2.4KB.
- 壓縮 css 文件.
plugins:[
new ExtractTextPlugin('css/style.css'), // 指定單獨(dú)打包的css文件存儲(chǔ)路徑和名字
new OptimizeCssplugin() // 壓縮 css 文件]
運(yùn)行 npm run build
壓縮后的css文件大小是 1.1KB
打開壓縮后的 css 文件查看.
安裝optimize-css-assets-webpack-plugin@3.2.0
在webpack.config.js的plugins節(jié)點(diǎn)中.配置new OptimizeCssplugin()即可壓縮css文件.
壓縮圖片文件
我們需要依賴 url-loader@1.1.2 file-loader@2.0.0 處理在webpack打包依賴時(shí)碰到 import xxx.jpg|png|xxx 時(shí)的圖片文件.
不過在url-loader處理這些模塊之前, 可以使用 image-webpack-loader@4.6.0 先來進(jìn)行縮這些文件.
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 中設(shè)置如下配置.
{
test: /\.(jpg|jpeg|png|git|webp|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024 * 100, // 小于100kb --> url --> base64編碼
// 這里如果只寫一個(gè)文件名,那么圖片將打包到 entry.output.path 路徑下,也就是 dist/name.ext
// name: '[name].[ext]',// 大于100KB 把 url(xx) 替換成 ../images/[name].[ext]
// 如果,這里寫的名字包含路徑,那么也是相對(duì)于 entry.ouput.path 路徑
// 同時(shí)這個(gè)名字將會(huì)作為生成的css中url中的圖片地址.
name:'images/[name].[ext]', // -> 存儲(chǔ)路徑是 dist/images/name.ext
publicPath: '/webpack-demo-img/dist/' // 加上這個(gè)配置,就等于是 pulblicPath + name = css.url中的鏈接地址.
}
},
{
// 圖片文件壓縮
loader: 'image-webpack-loader',
options: {
disable: false, // 啟用.
// jpg圖片如何壓縮
mozjpeg: {
progressive: true,
quality: 70
}
}
}
]
}
step 3.
在項(xiàng)目中添加一個(gè)原圖大小為 902KB 的圖片.
在 index.js 導(dǎo)入這張圖片
step 4.
執(zhí)行 npm run build 進(jìn)行打包.
一張?jiān)瓐D大小為 902KB 的圖片最終被壓縮成了 206KB
當(dāng)執(zhí)行webpack打包命令時(shí).
- 它在
index.js中碰到了import './assets/image/beijing.jpg' - 模塊后綴名是:
.jpg. - 于是首先將模塊內(nèi)容,也就是圖片交給
image-webpack-loader來處理. 圖片文件從原來的 902KB 壓縮成了206KB. - 接著把這個(gè)壓縮后大小為
206KB的文件,交給url-loader. -
url-loader根據(jù)自身配置的options.limit來決定把圖片移動(dòng)到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
}
}
}
