使用vue構(gòu)建項目首屏加載時，出現(xiàn)加載慢，白屏的問題解決方案：
步驟一 webpack來打包vue項目，vendor.js過大問題解決
- 1.造成過大的原因是因為在main.js導(dǎo)入第三庫太多時,webpack合并js時生成了vendor.js(我們習(xí)慣把第三方庫放在vendor里面)造成的.如下圖在main.js引用了一些第三方庫。導(dǎo)致了你的服務(wù)器端的js文件越大則用戶加載頁面的時間會越長(因為所需下載js的時間越久)
首先在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
打開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
在控制臺當(dāng)中可以看到文件壓縮的記錄
static/js/vendor.50304a716a06fb947df7.js 的size
我這里一開始有450k 當(dāng)優(yōu)化完以后整整小了一半多 222kB（當(dāng)你用了一些ui組件庫替換成cdn說不定更大的驚喜）
sizexiao.png 6.最后可以通過打開項目測試在首屏加載時有著明顯的打開提速效果！
步驟二 vue-cli開啟打包壓縮 和后臺配合 gzip訪問
- 1.首先打開 config/index.js ，找到 build 對象中的 productionGzip ，改成 true
- 打開 productionGzip: true 之前，先要安裝依賴 compression-webpack-plugin ，官方推薦的命令是：
npm install --save-dev compression-webpack-plugin
//(此處有坑) 如果打包報錯，應(yīng)該是版本問題 ，先卸載之前安裝的此插件 ，然后安裝低版本
npm install --save-dev compression-webpack-plugin@1.1.11
- 3.等安裝好了，重新打包 npm run build ，此時打包的文件會 新增 .gz 文件。是不是比原來的js文件小很多呢，之后項目訪問的文件就是這個.gz文件
- 4.后臺nginx開啟gzip模式訪問，瀏覽器訪問項目，自動會找到 .gz 的文件。加載速度明顯提高。
開啟 nginx gzip ,在 nginx.conf 配置文件中 配置
http { //在 http中配置如下代碼，
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #壓縮級別
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 測試訪問
curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com" //訪問請求中 Content-Encoding: gzip 表示 壓縮成功頁面，
同理 訪問js，css等 可測試 是否壓縮成功.
- 6 最后訪問項目，進入首頁的時候加載速度會有所提升
