建站
咨詢
售后
建站咨詢
新聞中心
問題的解決，一般來說有這樣幾種思路：
10余年的塔城網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。網絡營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整塔城建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“塔城網站設計”,“塔城網站推廣”以來，每個客戶項目都認真落實執(zhí)行。
- UI 組件按需加載
- 路由懶加載
- 組件重復打包
- gzip
這些加載方式中，UI 組件按需加載和 gzip 是兩種比較常用的方案，另外兩種優(yōu)化方式則要結合具體的項目，看看是否具備相關條件。
所以，本文松哥就先來和大家聊一聊 UI 組件懶加載和 gzip。
1. ElementUI 按需加載?
1.1 問題復現(xiàn)
不做任何優(yōu)化，我們一般是在 main.js 中按照如下方式來引入 ElementUI 的：
import ElementUI from'element-ui';
import'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size:'small'});
css 這個不用說，肯定得引入。但是按照上面這種引入方式，除了 css，其他組件全部都引入到項目中了，最新版的 ElementUI 中的組件已經接近 60 個了，但是我們項目中用的組件可能沒有這么多，這些最終沒用上的組件就會造成資源浪費。
在不做任何優(yōu)化的情況下，我們通過如下命令對項目生成 report.html 用來幫助我們分析包內容：
vue-cli-service build --report
該命令執(zhí)行的日志如下(截取了關鍵部分)：
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (1.17 MiB)
css/chunk-vendors.9948ce82.css
js/chunk-vendors.11959501.js
css/app.4e8a7623.css
js/app.ce6f575c.js
File Size Gzipped
dist/js/chunk-vendors.11959501.js 840.77 KiB 227.94 KiB
dist/js/app.ce6f575c.js 99.08 KiB 30.95 KiB
dist/js/chunk-64435448.d0a0516e.js 26.52 KiB 5.87 KiB
dist/js/chunk-0c17a57a.d553638c.js 23.79 KiB 5.49 KiB
dist/js/chunk-a3fdbb9c.ddc4c008.js 13.30 KiB 3.45 KiB
dist/js/chunk-54277bc7.2882c4cd.js 10.40 KiB 2.95 KiB
dist/js/chunk-4e552d82.c64f4d10.js 1.78 KiB 0.63 KiB
dist/js/chunk-18458ebc.32fb57c9.js 1.54 KiB 0.62 KiB
dist/js/chunk-2d0d03c8.3a093d55.js 0.52 KiB 0.36 KiB
dist/js/chunk-2d237c54.0b312051.js 0.43 KiB 0.33 KiB
dist/css/chunk-vendors.9948ce82.css 258.19 KiB 41.36 KiB
dist/css/app.4e8a7623.css 3.46 KiB 1.09 KiB
dist/css/chunk-0c17a57a.9fe19f94.css 0.86 KiB 0.35 KiB
dist/css/chunk-64435448.3755e146.css 0.30 KiB 0.15 KiB
從這段日志中我們可以看到，項目入口文件的大小超出了官方建議的 244KB，而這可能會影響網頁的表現(xiàn)。
此時我們把打包后的文件拷貝到 Spring Boot 的 resources/static 目錄下，啟動后端項目，來看下瀏覽器的加載情況：
可以看到，最大的 chunk-vendors.11959501.js 文件加載用了 369ms。
同時大家注意到，此時在前端 dist 目錄下還有一個文件叫做 report.html，這是生成的打包報告，我們在瀏覽器打開這個頁面，如下：
在這個 html 頁面中，通過可視化頁面向我們展示了到底是誰把 js 文件撐大的，從圖中我們可以看到，chunk-vendors.11959501.js 文件之所以比較大，是因為它里邊的 element-ui.commons.js 這個文件比較大。
實際上，每個模塊都可以去想辦法優(yōu)化，但是槍打出頭鳥，因為 element-ui.commons.js 實在太大了，我們就先把它給優(yōu)化了。
1.2 問題解決
優(yōu)化辦法其實很簡單，ElementUI 官網也給出了辦法，首先我們加載安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后修改 babel.config.js 文件，如下：
module.exports = {
presets: [
'@vue/app',
['@babel/preset-env', {
modules: false
}]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
配置完成后，再去修改 main.js 文件，將我們需要用到的組件一個一個引入進來：
import {
Button,
Input,
Table,
TableColumn,
Dialog,
Card,
Container,
Icon,
Select,
Form,
Tag,
Tree,
Pagination,
Badge,
Loading,
Message,
MessageBox,
Menu,
Tabs,
TabPane,
Breadcrumb,
BreadcrumbItem,
Dropdown,
Steps,
Tooltip,
Popover,
Collapse,
FormItem,
Checkbox,
Header,
DropdownMenu,
DropdownItem,
Aside,
Main,
MenuItem,
Submenu,
Option,
Col,
Row,
Upload,
Radio,
DatePicker,
RadioGroup,
CollapseItem,
Switch
} from'element-ui';
import'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$ELEMENT = {size: 'small', zIndex: 3000};
Vue.use(Switch);
Vue.use(CollapseItem);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(DatePicker);
Vue.use(Upload);
Vue.use(Row);
Vue.use(Col);
Vue.use(Option);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(Header);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Checkbox);
Vue.use(FormItem);
Vue.use(Collapse);
Vue.use(Popover);
Vue.use(Menu);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Dropdown);
Vue.use(Steps);
Vue.use(Tooltip);
Vue.use(Tree);
Vue.use(Pagination);
Vue.use(Badge);
Vue.use(Loading);
Vue.use(Button);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dialog);
Vue.use(Card);
Vue.use(Container);
Vue.use(Icon);
Vue.use(Select);
Vue.use(Form);
Vue.use(Tag);
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
這里的代碼倒是不難，有兩個需要注意的地方：
- MessageBox 的引入方式和其他組件不太一樣，需要注意。
- 給組件統(tǒng)一定制 size 和 zIndex 的方式有所變化。
配置完成后，我們再次執(zhí)行 vue-cli-service build --report ，查看打包結果：
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (1.03 MiB)
css/chunk-vendors.26d2c5b9.css
js/chunk-vendors.e2a11728.js
css/app.4e8a7623.css
js/app.c5dd78e5.js
File Size Gzipped
dist/js/chunk-vendors.e2a11728.js 683.05 KiB 177.91 KiB
dist/js/app.c5dd78e5.js 101.70 KiB 31.90 KiB
dist/js/chunk-64435448.d0a0516e.js 26.52 KiB 5.87 KiB
dist/js/chunk-0c17a57a.d553638c.js 23.79 KiB 5.49 KiB
dist/js/chunk-33b8cd94.7bbae1a0.js 13.30 KiB 3.46 KiB
dist/js/chunk-df7e035a.414b548f.js 10.40 KiB 2.95 KiB
dist/js/chunk-4e552d82.c64f4d10.js 1.78 KiB 0.63 KiB
dist/js/chunk-18458ebc.32fb57c9.js 1.54 KiB 0.62 KiB
dist/js/chunk-2d0d03c8.3a093d55.js 0.52 KiB 0.36 KiB
dist/js/chunk-2d237c54.0b312051.js 0.43 KiB 0.33 KiB
dist/css/chunk-vendors.26d2c5b9.css 262.71 KiB 42.11 KiB
dist/css/app.4e8a7623.css 3.46 KiB 1.09 KiB
dist/css/chunk-0c17a57a.9fe19f94.css 0.86 KiB 0.35 KiB
dist/css/chunk-64435448.3755e146.css 0.30 KiB 0.15 KiB
和前面的日志比較后發(fā)現(xiàn)，將 ElementUI 按需引入后，還是有效果的，只是效果不太明顯。這個時候我們再來打開 report.html 頁面來看下：
可以看到，規(guī)模龐大的 element-ui.commons.js 已經不見了，取而代之的是一眾小嘍啰。相關文件大小也減少了 150kb 左右。
這感覺效果有限。
2. gzip?
所以，在前面代碼的基礎上，我們來通過 gzip 繼續(xù)壓縮。
通過 gzip 來壓縮，我們有兩種思路。這兩種思路和前后端分離的兩種不同部署方式有關。
前端編譯打包后拷貝到后端，直接部署后端項目即可
前后端分離部署，前端通過 Nginx 來部署（推薦）
2.1 服務端配置
如果使用第一種方式，前端可以不用做額外工作，還是之前編譯后的文件。我們在后端 application.yml 中添加如下配置，開啟 gzip 壓縮：
server:
compression:
enabled:true
配置完成后，重啟后端項目，訪問項目首頁，如下，可以看到文件基本上都被壓縮了：
點開一個請求，可以看到 gzip 已經生效了：
2.2 前端配置
Nginx 中配置前端的 gzip 壓縮，有兩種思路：
- Nginx 動態(tài)壓縮，靜態(tài)文件還是普通文件，請求來了再壓縮，然后返回給前端。
- Nginx 靜態(tài)壓縮，提前把文件壓縮成 .gz 格式，請求來了，直接返回即可。
2.2.1 Nginx 動態(tài)壓縮
動態(tài)壓縮 Vue 還是使用普通的打包編譯后的文件，將前端編譯打包后的文件拷貝到 Nginx 的 html 目錄下，然后訪問 nginx：http://192.168.91.129
確保 nginx 運行成功后，接下來對 nginx 進行配置：
gzip on; # 開啟 gzip
gzip_min_length 2k;# 超過 2kb 進行壓縮
gzip_disable msie6; # ie6 不適用 gzip
gzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # 需要處理的文件
配置完成后，重啟 Nginx：
./nginx -s reload
啟動成功后，再去訪問前端頁面，就可以看到壓縮效果了。
2.2.2 Nginx 靜態(tài)壓縮
上面的動態(tài)壓縮有一個問題，就是每次請求響應的時候都要壓縮，其實都是相同的文件，總是壓縮有點浪費資源。
我們可以提前將文件壓縮好，就保存在服務端，需要用的時候直接返回，就會方便很多。
這需要我們首先在前端安裝壓縮插件：
npm install compression-webpack-plugin -D
安裝成功之后，接下來在 vue.config.js 中進行配置：
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: proxyObj
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 1024,
deleteOriginalAssets: false
})
]
}
}
}
}
- threshold 表示超過 1kb 的文件就進行壓縮。
- deleteOriginalAssets 表示壓縮后是否刪除原文件。
配置完成后，再次執(zhí)行打包命令 vue-cli-service build。這次打包完成后，我們可以在 js 目錄下看到 .gz 文件，如下：
接下來將文件上傳到 Nginx 服務器，然后對 Nginx 重新進行編譯打包。想讓 Nginx 返回已經壓縮好的文件，需要用到 Nginx 中的 http_gzip_static_module 模塊，這個模塊可以發(fā)送以 .gz 作為文件擴展名的預壓縮文件，所以我們要對 Nginx 重新進行編譯打包：
./configure --with-http_gzip_static_module
make
make install
然后在 Nginx 配置文件中開啟 gzip_static，如下：
gzip_static on;
注意，開啟了 gzip_static 后，gzip_types 就失效了，所以也沒必要配置這個屬性了。
配置完成后，重啟 Nginx，再去訪問，查看瀏覽器日志，就會發(fā)現(xiàn) gzip 已經生效了。
「注意：」
靜態(tài)壓縮返回的 gzip 壓縮文件都是提前準備好的，沒有 .gz 格式的文件就會自動返回原文件。這是一種和動態(tài)壓縮不同的響應策略。動態(tài)壓縮是根據(jù) Nginx 中的配置，超過配置的大小就會自動進行壓縮。
好了，這一波操作下來，首屏加載速度提高了 5 倍左右。
網站名稱：項目啟動頁加載太慢？我們一起掌握幾個優(yōu)化方案！
當前URL：http://www.5511xx.com/article/coddjce.html
