聊聊 webpack 打包如何壓縮包檔案大小

想必很多人都經歷過做完乙個專案後,再打包發現某些檔案非常大,導致頁面載入時很慢,這就很影響使用者體驗了,所以在我經歷了一些打包後,講講如何有效地縮小包體積,加快頁面的首屏渲染

相信很多專案都會用到polyfill 那麼一整個polyfill 會佔據很多的空間,這個時候需要使用動態polyfill來解決這個問題了:

在index.html檔案中引入:

你可以開啟在最新的瀏覽器中,會發現他並沒有什麼polyfill,而如果你開啟移動端的模式,並且重新重新整理頁面的話,可以發現他又多了一些方法;

這個就是動態polyfill 他會根據瀏覽器標頭來返回不同的polyfill

這裡放下他的文件:

使用過 vue-cli 建立的專案,應該都能看到,這些外掛程式,在build/webpack.prod.conf.js檔案中可以觀察到這些外掛程式,使用 react 專案的可以照著配,使用一下相同的外掛程式;

使用哪些請自行酌情判斷,我來簡介一些主要外掛程式的作用:

在這裡附上所有外掛程式的說明:

先上我的專案裡打包後的檔案體積,該專案使用 vue-cli 構建:

可以看到佔體積最大的是 vendor.js 這個檔案

這個專案所佔的檔案基本是所用的包的**,如 vue ,vuex,vue-router,element-ui等檔案的 js **

我在之前搜尋壓縮**的部落格時,經常也會看到 dll 外掛程式能夠壓縮體積,但是經過實踐證明,這個結論是錯誤的;

他的作用只是加快 run build 和 run dev 的速度,但是,相較於使用 cdn 加速,是一點優勢都沒有,下面來看

新增 dll 之後的檔案大小:

新增優化 js **後的檔案大小:

通過看到檔案是壓縮了,但是仍然還沒有我正常情況下的檔案小,也許是我優化的問題,但是再優化,最多也就是和正常情況差不多,仍然沒有壓縮體積的作用;

可以得出結論 dllplugin 基本上是只用於開發環境的;

目前來說這是最好的乙個方法了;

可以先使用 analys 分析一下, vendor 裡最大占用的外掛程式是什麼,根據結果選擇;

比如我的專案中 element-ui 和 vue 的 js 檔案是佔據第一和第二的大小的,所以需要將這2個檔案使用 cdn 加速來替代;

需要注意的是使用 cdn 的檔案不要太多,盡量不超過3個檔案

可以使用免費的bootcdn 加速

需要注意要將檔案放在前面一點

在build/webpack.base.conf.js 檔案的module.exports裡新增:

externals: ,

在 main.js和任何引用過vue 檔案的地方:刪除 import vue from 'vue',如果有乙個沒有刪,那麼打包時還會把檔案引用的;

並且刪除 import elementui from 'element-ui' 和 vue.use(elementui)

如果新增了eslint 那麼可能會報錯可以使用 const vue = window.vue來去除報錯,

如果仍需要在 main.js 裡使用 element 的話可以通過window.element來引用;

這個地方我說錯了,關於 vue和 element 的 import 不用修改

但是要保證externals和main.js中引入的是一樣的

比如:

externals: ,

和

import element from 'element-ui'

需要對應

前車之鑑,還望各位周知

打包後可以有效減小包體積:

這個方法的壓縮**能力是非常恐怖的,壓縮率可達70%,不過需要了解的是需要伺服器開啟 gzip 加速才管用,我沒使用這個方法,不排除他會對伺服器會造成一定的壓力;

如果需要polyfill的話,可以使用動態polyfill來替代,如果伺服器支援 gzip 加速且不擔心伺服器壓力的話,那麼可以使用 gzip 來加速,否則使用 cdn 加速主要檔案的方法來壓縮**,當然首先你也需要新增 webpack 外掛程式來優化 js **;