使用vue構(gòu)建項(xiàng)目首屏加載時(shí)，出現(xiàn)加載慢，白屏的問(wèn)題解決方案：
步驟一 webpack來(lái)打包vue項(xiàng)目，vendor.js過(guò)大問(wèn)題解決
- 1.造成過(guò)大的原因是因?yàn)樵趍ain.js導(dǎo)入第三庫(kù)太多時(shí),webpack合并js時(shí)生成了vendor.js(我們習(xí)慣把第三方庫(kù)放在vendor里面)造成的.如下圖在main.js引用了一些第三方庫(kù)。導(dǎo)致了你的服務(wù)器端的js文件越大則用戶(hù)加載頁(yè)面的時(shí)間會(huì)越長(zhǎng)(因?yàn)樗柘螺djs的時(shí)間越久)
首先在index.html中，使用CDN的資源，復(fù)制以下bootstrap的鏈接資源：
<body>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://unpkg.com/vue-awesome-swiper@2.6.7/dist/vue-awesome-swiper.js"></script>
</body>
- 2.在bulid/webpack.base.conf.js文件中，添加externals，導(dǎo)入index.html下所需的資源模塊：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', 'lib-flexible', './src/main.js']
},
externals: { // <-添加
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
VueAwesomeSwiper: 'VueAwesomeSwiper'
},
- 3.在main.js里將以下 import 注釋 替換 require 引入模塊
// import Vue from 'vue'
// import VueAwesomeSwiper from 'vue-awesome-swiper'
const Vue = require('vue')
const VueAwesomeSwiper = require('VueAwesomeSwiper')
Vue.use(VueAwesomeSwiper)
- 4.當(dāng)然可以在生產(chǎn)環(huán)境當(dāng)中刪除掉不必要的console.log
打開(kāi)build/webpack.prod.conf.js 在plugins里添加以下代碼
plugins: [
new webpack.optimize.UglifyJsPlugin({ //添加-刪除console.log
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
},
sourceMap: true
}),
-
5.執(zhí)行npm run build
在控制臺(tái)當(dāng)中可以看到文件壓縮的記錄
static/js/vendor.50304a716a06fb947df7.js 的size
我這里一開(kāi)始有450k 當(dāng)優(yōu)化完以后整整小了一半多 222kB（當(dāng)你用了一些ui組件庫(kù)替換成cdn說(shuō)不定更大的驚喜）
sizexiao.png 6.最后可以通過(guò)打開(kāi)項(xiàng)目測(cè)試在首屏加載時(shí)有著明顯的打開(kāi)提速效果！
步驟二 vue-cli開(kāi)啟打包壓縮 和后臺(tái)配合 gzip訪問(wèn)
- 1.首先打開(kāi) config/index.js ，找到 build 對(duì)象中的 productionGzip ，改成 true
- 打開(kāi) productionGzip: true 之前，先要安裝依賴(lài) compression-webpack-plugin ，官方推薦的命令是：
npm install --save-dev compression-webpack-plugin
//(此處有坑) 如果打包報(bào)錯(cuò)，應(yīng)該是版本問(wèn)題 ，先卸載之前安裝的此插件 ，然后安裝低版本
npm install --save-dev compression-webpack-plugin@1.1.11
- 3.等安裝好了，重新打包 npm run build ，此時(shí)打包的文件會(huì) 新增 .gz 文件。是不是比原來(lái)的js文件小很多呢，之后項(xiàng)目訪問(wèn)的文件就是這個(gè).gz文件
- 4.后臺(tái)nginx開(kāi)啟gzip模式訪問(wèn)，瀏覽器訪問(wèn)項(xiàng)目，自動(dòng)會(huì)找到 .gz 的文件。加載速度明顯提高。
開(kāi)啟 nginx gzip ,在 nginx.conf 配置文件中 配置
http { //在 http中配置如下代碼，
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #壓縮級(jí)別
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不壓縮臨界值
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
保存退出 ，并 重啟 nginx
systemctl reload nginx.service
systemctl restart nginx.service
- 5 測(cè)試訪問(wèn)
curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com" //訪問(wèn)請(qǐng)求中 Content-Encoding: gzip 表示 壓縮成功頁(yè)面，
同理 訪問(wèn)js，css等 可測(cè)試 是否壓縮成功.
- 6 最后訪問(wèn)項(xiàng)目，進(jìn)入首頁(yè)的時(shí)候加載速度會(huì)有所提升
