vue高階實戰技巧 如何優化專案

2021-10-07 07:45:51 字數 2935 閱讀 2870

require.context：批量require檔案

（1）以業務為模組建立相應的模組目錄：

mode1-------------------------模組資料夾


|--pages----------------------模版資料夾


|---- model1.index.vue--------模版檔案


|---- model1.second.vue-------模版檔案


|--index.routes.js------------此模組的路由檔案
index.routes.js

let r = require.context("./page", true, /\.vue$/)  // 路徑，是否遍歷子資料夾，檔案正則


let arr = 


r.keys().foreach(key => )


} else )


}})
router/index.js 總路由檔案

import vue from 'vue'


import router from 'vue-router'


vue.use(router)


let r = require.context("../components", true, /\.routes\.js$/)


let arr = 


r.keys().foreach(key => )


export default new router()
路由引數問題：如果需要額外的引數配置，可以新建乙個mode.json檔案，設定配置資訊，然後讀取此檔案，根據key來配置。



}
打包速度優化的總結：

​ 處理的內容多少 --> 處理步驟多少

能少處理的就少處理，例如一些靜態資源可以通過cdn或者第三方線上位址引入，就不需要webpack進行打包了

能夠減少一些處理步驟：例如開發環境下不用打包，生產環境下的source-map

dll優化：可以把第三方包進行預處理（能少處理的就少處理）–> 真正打包的不需要處理這些庫；如一些第三方庫vue，vue-router，axios，loadsh這些只需要整合一次，打包壓縮一次就可以了，不需要每次都打包，從而減少打包的速度。

新建webpack.dll.js

const path = require('path')


const webpack = require('webpack')


const config = require('../config')


moudle.exports = ,


output: ,


plugin: [


// 外掛程式生成json檔案，告訴webpack真正打包的時候忽略哪些已經dll處理的檔案


new webpack.dllplugin()


]}
package.json檔案中增加執行指令碼：

"script":
npm run dll
webpack.prod.conf.js（真正打包的配置檔案）中需新增外掛程式接受不需要再打包的第三方庫：

plugins: [


new webpack.dllreferenceplugin()


]
提供全域性自定義的操作：專案中會有一些特殊需求，外掛程式就是為了解決這些需求的。它可以注入到每個元件的生命週期，然後自動做某些事情。

例如vue-router，vuex，使用時是通過vue.use() // 表示直接呼叫傳入的方法

function a() 


a.install = function() 


vue.use(a)  // "install"


如果傳入的引數是個方法，則直接執行此方法，如果此方法註冊了install屬性，且是個方法，則只執行install方法。
建立vueplugin資料夾，下新建index檔案

let a = ,


methods: {},


created: function() {}})}


}module.exports = a
在main.js入口檔案中引入外掛程式

import vueplugin from './vueplugin'


vue.use(vueplugin)
專案vuex過大，導致打包結果過大 ，解決：按元件非同步拆分載入vuex

建立store資料夾，新建modules資料夾存放不同功能模組非同步載入的js，同時建立index.js入口檔案

store>index.js（首屏載入的）

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex)


// 首頁必須載入的vuex


export default new vuex.store(


})
store>modules>mode1index.js（懶載入的檔案）

export default 


}
vueplugin>index.js

let a = )}}


})}


}module.exports = a
mode1>pages>mode1index.vue

export default
在main.js檔案中註冊store

import store from './store'


new vue()

sql優化實戰技巧的理解

1.全值匹配，這是最好的選擇，因為索引欄位用的越多，精確度高。使用四個當然比用三個好了 2.最佳左字首，因為索引先按照第乙個排序嘛，這裡有兩重理解。一般來講，第乙個字段排序就可以過濾很多資料了，所以用這個索引字段當然效果好了，你用別的字段不好，因為過濾的少嘛。當然這個和我們建立索引的順序有關，我們也...

8 29 實戰技巧 如何設定執行緒池

hystrix最重要的乙個點。執行緒池具體怎麼設定不知道？裡面的數量是怎麼來的。和對於我們來說是乙個非常大的困惑。hystrix的執行緒池在工作中設定的時候，有哪些技巧？首先在我們業務系統中，有個很重要的指標就是qps，更精確的說，他其實分三大類，包括rps tps qps這三個分別是什麼呢？乙個是...

vue專案優化技巧

1 vue cli service build report 2 通過視覺化的ui面板直接檢視報告 如果有修改 webpack 預設配置的需求，可以在專案根目錄中，按需建立 vue.config.js 這個配置檔案，從而對專案的打包發布過程做自定義的配置 vue.config.js 這個檔案中，應該...