使用場景：目前這個項目要嵌入到APP中使用，項目用到router、vuex、axios等
目前現狀：首次加載非常緩慢，等待時間超過8秒鐘
我們目的：減少包體積、減少http請求次數，同時保證代碼可用性、維護性、不變動業務代碼
路由按需加載
webpack默認將所有js源代碼打包成一個js文件，導致JS包會變得非常大，影響頁面首次加載速度
按需加載能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件的js文件
const home = () => import('@views/home/home')
// 或者
const home = (resolve) => {
import('@views/home/home').then((module) => {
resolve(module)
})
}部分走CDN
CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。
如果公司沒有考慮CDN，可以酌情將例如 vue vux vue-router 等不變動的資源使用第三方免費 CND 引入，並添加本地 fallback
//在vue.config.js中配置
configureWebpack: config => {
if (isProd != 'development') {
config.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
}
}
}在public/index.html
<body>
<div id="app"></div>
<% if (VUE_APP_ENV != "development") { %>
<!-- 運行時依賴 -->
<script src="//cdn.staticfile.org/vue/2.5.17/vue.runtime.min.js" type="text/javascript"></script>
<script src="//cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js" type="text/javascript"></script>
<script src="//cdn.staticfile.org/vuex/3.0.1/vuex.min.js" type="text/javascript"></script>
<script>
// 當cdn資源失效時，加載本地資源
window.Vue || document.write('<script src="./vue.min.js"><\/script>');
</script>
<% } %>
</body>nginx壓縮
目前有兩種壓縮方式，nginx壓縮，客戶端打包壓縮在上傳
1.nginx壓縮
客戶端啥都不用做直接上傳打包的代碼即可
就是每次請求時服務器先壓縮再返回資源，對服務器性能有一定消耗
nginx.conf文件
http{
#開啓服務端壓縮-損耗服務器cpu
gzip on; #開啓gzip
gzip_min_length 10k; #設置允許壓縮的頁面最小字節數; 這裏表示如果文件小於10個字節，就不用壓縮，因爲沒有意義，本來就很小
gzip_buffers 4 16k; #設置壓縮緩衝區大小，此處設置爲4個16K內存作爲壓縮結果流緩存
gzip_comp_level 3; #壓縮級別，1-10，數字越大壓縮的越好，也越佔用CPU
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; #制定壓縮的類型,線上配置時儘可能配置多的壓縮類型!
gzip_vary on; #選擇支持vary header；改選項可以讓前端的緩存服務器緩存經過gzip壓縮的頁面; 這個可以不寫，表示在傳送數據時，給客戶端說明我使用了gzip壓縮
gzip_disable "MSIE [1-6]\."; #配置禁用gzip條件，支持正則。此處表示ie6及以下不啓用gzip（因爲ie低版本不支持）
}2.客戶端打包壓縮在上傳
在打包是需要配置vue.config.js
//需要安裝 npm i compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin');
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.(js|css)$/,// 匹配文件名
threshold: 10240, // 對超過10k的數據壓縮
deleteOriginalAssets: false, // 不刪除源文件
minRatio: 0.8 // 壓縮比
})
]
}
}打包出來的可能會帶有.gz的文件夾
nginx配置一句話即可
nginx.conf文件
http{
gzip_static on; #靜態壓縮
}nginx設置緩存
#server模塊一般對應在相對應的xxx.conf中,不建議都寫在nginx.conf中
server{
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
access_log off;
expires 30d; // 天
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
access_log off;
expires 24h; // 小時
}
location ~* ^.+\.(html|htm)$ {
expires 1h;
}
}實際效果
chunk-vendors.js可能會比較大，3M左右，開啓壓縮只剩下1M
上傳代碼到服務器打開瀏覽器測試,在公司wifi測試下，整個加載過程不超3秒
