聊聊 webpack 打包如何壓縮包文件大小

時間 2019-11-12

標籤聊聊 webpack 打包如何壓縮文件大小简体版

原文原文鏈接

想必不少人都經歷過作完一個項目後,再打包發現某些文件很是大,致使頁面加載時很慢,這就很影響用戶體驗了,因此在我經歷了一些打包後,講講如何有效地縮小包體積,加快頁面的首屏渲染css

動態 polyfill

相信不少項目都會用到polyfill 那麼一整個polyfill 會佔據不少的空間,這個時候須要使用動態polyfill來解決這個問題了:
在 index.html 文件中引入:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
你能夠打開 https://cdn.polyfill.io/v2/polyfill.min.js 在最新的瀏覽器中,會發現他並無什麼polyfill,而若是你開啓移動端的模式,而且從新刷新頁面的話,能夠發現他又多了一些方法;
這個就是動態polyfill 他會根據瀏覽器標頭來返回不一樣的polyfill
這裏放下他的文檔:
https://cdn.polyfill.io/v2/docs/html

webpack 插件

使用過 vue-cli 建立的項目,應該都能看到,這些插件,在build/webpack.prod.conf.js文件中能夠觀察到這些插件,使用 react 項目的能夠照着配,使用一下相同的插件;
使用哪些請自行酌情判斷,我來簡介一些主要插件的做用:vue

extract-text-webpack-plugin 用於將 CSS 從主應用程序中分離
optimize-css-assets-webpack-plugin 壓縮提取出的css，解決extract-text-webpack-plugin CSS重複問題
CommonsChunkPlugin 將公共模塊拆出來，最終合成的文件可以在最開始的時候加載一次，便存到緩存中供後續使用
uglifyjs-webpack-plugin 壓縮js代碼須要說明的是能夠在上面加上去除 console.log 的選項,也是能夠有效減小包體積
ModuleConcatenationPlugin 做用域提高,對於壓縮代碼有一些效果,但不是很大

在這裏附上全部插件的說明:
https://webpack.docschina.org/plugins/react

先上個人項目裏打包後的文件體積,該項目使用 vue-cli 構建:
webpack

能夠看到佔體積最大的是 vendor.js 這個文件
這個項目所佔的文件基本是所用的包的代碼,如 vue ,vuex,vue-router,element-ui等文件的 js 代碼web

dll 插件

我在以前搜索壓縮代碼的博客時,常常也會看到 dll 插件可以壓縮體積,可是通過實踐證實,這個結論是錯誤的;
他的做用只是加快 run build 和 run dev 的速度,可是,相較於使用 cdn 加速,是一點優點都沒有,下面來看vue-router

添加 dll 以後的文件大小:
vuex

添加優化 js 代碼後的文件大小:
vue-cli

經過圖片看到文件是壓縮了,可是仍然尚未我正常狀況下的文件小,也許是我優化的問題,可是再優化,最多也就是和正常狀況差很少,仍然沒有壓縮體積的做用;element-ui

能夠得出結論 DllPlugin 基本上是隻用於開發環境的;

使用 cdn 加速

目前來講這是最好的一個方法了;
能夠先使用 analys 分析一下, vendor 裏最大佔用的插件是什麼,根據結果選擇;
好比個人項目中 element-UI 和 Vue 的 js 文件是佔據第一和第二的大小的,因此須要將這2個文件使用 cdn 加速來替代;
須要注意的是使用 cdn 的文件不要太多,儘可能不超過3個文件
可使用免費的bootcdn 加速 http://www.bootcdn.cn/
方法很簡單,在 index.html 裏面添加 cdn 地址:

<body>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.3.7/index.js"></script>
    <div id="app"></div>
</body>

須要注意要將文件放在前面一點
在build/webpack.base.conf.js 文件的module.exports裏添加:

externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
},

在 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: {
    'element-ui': 'ELEMENT'
},

和

import ELEMENT from 'element-ui'

須要對應
前車可鑑,還望各位周知

打包後能夠有效減少包體積:

Gzip加速

這個方法的壓縮代碼能力是很是恐怖的,壓縮率可達70%,不過須要瞭解的是須要服務器開啓 gzip 加速才管用,我沒使用這個方法,不排除他會對服務器會形成必定的壓力;

總結

若是須要polyfill的話,可使用動態polyfill來替代,若是服務器支持 Gzip 加速且不擔憂服務器壓力的話,那麼可使用 Gzip 來加速,不然使用 cdn 加速主要文件的方法來壓縮代碼,固然首先你也須要添加 webpack 插件來優化 js 代碼;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。