這是之前在公司oa項目優化時羅列的優化點,基本都已經完成,當時花了點心思整理的,保存在這里,方便以后其他項目用到查漏補缺。
1、打包文件中的app.js文件放入cdn,加快頁面首次加載速度
2、提取公共方法,減少js代碼量
3、提取公共組件,將統計分析的售前和售后,客戶分配,客戶管理,客服管理等頁面的搜索條件模塊化,減少了html代碼量,減少了每個頁面中都有的重復方法。
4、vue-router路由全部改成懶加載路由,該頁面被點開時才加載該頁面.vue組件,提高首頁加載速度。
5、根據頁面復雜度,刪除部分頁面生命周期created中的window.setTimeout方法
6、將所以v-show替換成v-if,v-if如果不為真就不會加載這段代碼,而v-show還是會加載這些代碼,這樣加快了頁面加載速度。
7、檢查所有頁面,刪除頁面中沒有用到的css和data數據以及js方法,減少文件體積。
8、使用webpack插件,將常用不需要重復打包的依賴打包出來,在index.html直接引用,減小最后上線打包出來vendor文件體積,加快首屏加載速度和打包速度。(實驗成功,但是沒有在打包版本實施)
9、對復雜頁面的彈窗使用lazyRender懶渲染組件,優化該頁面的打開速度。
10、webpack build打包時去除debugger和console語句,具體修改在webpack.prod.conf.js UglifyJsPlugin插件的compress里。
11、對每個頁面vuex進行優化,提到全局方法,減少大量重復代碼
12、對頁面自適應樣式進行優化, 用全局css代替原來的js;減少了每個頁面css代碼
13、對表格進行優化,提取出列名等寫出數組,減少表格html體積 0.2
14、引入頂部進度條插件,提高頁面加載體驗
15、研究首頁優化方法,加快單頁面首頁加載體驗
16、引用路徑優化 webpack.base.conf.js resolve.alias
17、webpack 解析模塊時應該搜索的目錄優化 webpack.base.conf.js resolve.modules
18、使用webpack進行代碼分離,每個頁面打包成一個單獨js,減少文件體積,加快加載速度
19、把常用的依賴使用外部cdn引入,不再打包,分擔服務器壓力,加快頁面加載速度。
20、使用webpack代碼分析工具,方便針對性優化依賴和代碼塊。
21、同一個組件比如多個編輯頁面切換時,本來的方案是使用watch.$route進行處理,經參考也可以在路由上加唯一key,保證切換路由重新渲染。參考http://www.jianshu.com/p/c315c9211146中的router-view
22、合理使用vuex,頻繁切換的頁面組件比如多個編輯頁面,保存多個數據store,減少http請求。
23、加快webpack性能,參考地址https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/中設置 test & include & exclude
24、生產環境采用webpack-parallel-uglify-plugin替換UglifyJsPlugin,提高webpack性能,參考地址https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/中的增強代碼代碼壓縮工具
25、src/api/config.js和package.json文件,實現自動分環境運行。