資訊專欄INFORMATION COLUMN
1. webpack打包時(shí)：
生產(chǎn)環(huán)境下盡可能減少依賴包，按需引用 （webpack-bundle-analyzer）
2. 組件分塊按需加載
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
linkActiveClass: "router-link-class",
routes: [
{
path: "/",
component: resolve => require(["../components/組件"]， resolve),
}
] })
3. 使用預(yù)渲染
// webpack.prod.config.js
cnpm i prerender-spa-plugin --save-dev
cnpm i vue-meta-info --save-dev
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
plugins: [
new PrerenderSPAPlugin({
// 生成靜態(tài)文件的目錄，路徑只能是一級
staticDir: path.join(__dirname, "../dist"),
// 對應(yīng)需要預(yù)渲染的路由文件
routes: ["/", "/detail"],
// 預(yù)編譯
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false,
// 將在main.js的 document.dispatchEvent(new Event("render-event"))中觸發(fā)
renderAfterDocumentEvent: "render-event"
})
})
]
// main.js
import Vue from "vue";
// 網(wǎng)頁標(biāo)簽支持
import VueMetaInfo from "vue-meta-info";
Vue.use(VueMetaInfo);
new Vue({
el: "#app",
router,
store,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event("render-event"))
}
})
# new Router({
# mode: "history" // 必須使用‘history’模式
# })
// 頁面中處理 ***.vue
export default {
metaInfo: {
title: "頁面標(biāo)題",
meta: [
{
name: "keywords",
content: "關(guān)鍵字"
},
{
name: "description",
content: "描述"
}
]
}
}
4.使用gzip壓縮減小傳輸文件大小
// 以 Nginx 服務(wù)器為例
http {
............
# 啟用gzip
gzip on;
# 啟用gzip壓縮的最小文件
gzip_min_length 1k;
#設(shè)置壓縮緩沖區(qū)大小，此處設(shè)置為4個(gè)16K內(nèi)存作為壓縮結(jié)果流緩存
gzip_buffers 4 16k;
# gzip 壓縮級別，1-10，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間
gzip_comp_level 2;
# 進(jìn)行壓縮的文件類型。javascript有多種形式。其中的值可以在 mime.types 文件中找到。
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 font/ttf font/otf image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6].";
.....................
}
5. 服務(wù)端渲染
案例： https://gitee.com/vikeel/mySe...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106649.html
摘要：不推薦移動端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進(jìn)行羅列注意，是羅列不是展開，遇到不會不懂的點(diǎn)還請站外擴(kuò)展 開車...
摘要：不推薦移動端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進(jìn)行羅列注意，是羅列不是展開，遇到不會不懂的點(diǎn)還請站外擴(kuò)展 開車...
摘要：不推薦移動端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進(jìn)行羅列注意，是羅列不是展開，遇到不會不懂的點(diǎn)還請站外擴(kuò)展 開車...
閱讀 3024·2021-10-27 14:15
閱讀 3017·2021-09-07 10:18
閱讀 1335·2019-08-30 15:53
閱讀 1585·2019-08-26 18:18
閱讀 3387·2019-08-26 12:15
閱讀 3472·2019-08-26 10:43
閱讀 665·2019-08-23 16:43
閱讀 2220·2019-08-23 15:27
