想必很多人都經歷過做完一個項目后,再打包發現某些文件非常大,導致頁面加載時很慢,這就很影響用戶體驗了,所以在我經歷了一些打包后,講講如何有效地縮小包體積,加快頁面的首屏渲染
動態 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/
webpack 插件
使用過 vue-cli 創建的項目,應該都能看到,這些插件,在build/webpack.prod.conf.js文件中可以觀察到這些插件,使用 react 項目的可以照着配,使用一下相同的插件;
使用哪些請自行酌情判斷,我來簡介一些主要插件的作用:
- 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/
先上我的項目里打包后的文件體積,該項目使用 vue-cli 構建:
可以看到占體積最大的是 vendor.js 這個文件
這個項目所占的文件基本是所用的包的代碼,如 vue ,vuex,vue-router,element-ui等文件的 js 代碼
dll 插件
我在之前搜索壓縮代碼的博客時,經常也會看到 dll 插件能夠壓縮體積,但是經過實踐證明,這個結論是錯誤的;
他的作用只是加快 run build 和 run dev 的速度,但是,相較於使用 cdn 加速,是一點優勢都沒有,下面來看
添加 dll 之后的文件大小:
添加優化 js 代碼后的文件大小:
通過圖片看到文件是壓縮了,但是仍然還沒有我正常情況下的文件小,也許是我優化的問題,但是再優化,最多也就是和正常情況差不多,仍然沒有壓縮體積的作用;
可以得出結論 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 代碼;