前言
我的專案是vue-cli3構建的，vue+vuex+vue-router+axios+element-ui，隨著模組不斷增多，專案**越來越臃腫，打包上傳後，瀏覽器清除快取後開啟的速度變得很慢，對我這種急性子來說簡直不能忍。f12檢視network，發現有乙個chunk-vendors.js的檔案竟然有幾m的大小，也是造成頁面開啟緩慢的元凶，下面就說一下我找到的一些關於vue首屏優化的方案。
1.元件的引入方式
開啟入口檔案main.js，我在這裡全域性引入了很多檔案：
我們要仔細思考其中一些模組/樣式是否需要全域性引入，例如上面的bpmn外掛程式相關的包，實際上專案裡只有兩三個頁面用到了，這種就可以在main.js中刪除，將他移到具體頁面中引用。
2.按需引入模組
舉個例子，還是main.js中：
import echarts from 'echarts'import 'echarts/lib/chart/line'import 'echarts/lib/chart/bar'import 'echarts/lib/chart/pie'//... ...script>configurewebpack: }由於我的專案會部署到客戶的線下環境中，所以這一步***優化就沒有做。
4.路由懶載入
路由檔案如果沒開啟懶載入的話，會把所有元件一次性打包，導致首屏載入變慢。
路由懶載入寫法：
export default new router( ]})修改webpack配置：
const compressionplugin = require('compression-webpack-plugin');const productiongzipextensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;module.exports = , chainwebpack: config => )); } },};可以看到最終打包出來的檔案體積：
相比之前已經大大壓縮了，首屏載入的速度也變得很快，非常nice
如果文章對你有所幫助，不妨點個在看
歡迎關注我的部落格www.echo1024.com共勉
首屏優化策略
效能優化是程式開發中乙個永恆的話題，在當前全民 的大環境下，低端機型 弱網環境 頻寬限制依然占有市場很大的份額，前端頁面的快速呈現，不僅影響使用者的使用體驗，對使用者的閱讀深度 停留時長等都有比較深遠的影響。而在前端渲染優化中最重要的乙個是首屏渲染優化。把內容最快的呈現給使用者，提供及時的可互動方式...
Vue首屏載入優化
vue首屏載入優化 單頁面應用的乙個問題就是首頁載入東西過多，載入時間過長。特別在移動端，單頁面應用的首屏載入優化更是繞不開的話題。下面我會寫出我在專案中做的一些優化，希望大家能夠相互討論，共同進步。分析載入慢問題 1.webpack bundle analyzer 分析 首頁我們來看看沒有經過任何...
App首屏介面效能優化
我們服務端rpc框架採用restful，其底層是curl實現的。curl採用http協議的，另外我們服務端的技術棧是php。我們都知道http協議相比較tcp而言，不僅多了http的報頭，php本身效能也是大問題。在不做大重構的情況下，怎麼做最小的修改，完成最大的效能提高。還是很有挑戰性的。針對首屏...