webpack vue首頁載入慢,打包優化

2021-10-06 02:48:50 字數 609 閱讀 4573

我們專案是主要是使用vue + elementui + webpack,打包出來首頁載入太慢,做了一些優化。

路由元件按需載入

,

2.部分外掛程式使用cdn引入

首先,在webpack.base.conf.js裡 module.exports中的externals中定義使用cdn引入的外掛程式,

externals:

,

然後,在index.html 中直接引入上面這些外掛程式即可。

3.使用 compression-webpack-plugin 外掛程式進行 gzip壓縮,這一點能大幅提公升載入速度,需要運維配合,改下nginx的配置 , 啟用gzip壓縮並 開啟gzip_static。

首先,設定productiongzip: true

if

(config.build.productiongzip)))

}

4.打包時去掉sourcemap檔案

修改 vue.config.js 配置

module.exports =

vue router路由懶載入,減少首頁載入時間

懶載入,也叫延遲載入,即在需要的時候進行載入,隨用隨載。像vue這種單頁面應用,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,時間過長,會出現長時間的白屏,即使做了loading也是不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載...

jeeCMS首頁載入流程解析

如果jeecms部署完畢之後,在瀏覽器中輸入http localhost 8080 jeecms,系統直接會按照以下步驟執行 2.然後再快取中查詢配置檔案,在配置檔案中找到url匹配,web.xml中已經放入快取的配置檔案,如圖所示 其中jeecms context.xml是對標籤的初始化,可以方便...

easyUI datagrid資料載入慢

發現 沒改之前進入乙個列表頁面 二十多個字段 瞬間就進入頁面,看到資料。改為easyui後進入列表頁面,載入時間為 5 秒才看到資料!分析 即使欄位稍多,但也不應該載入這麼慢的,畢竟它是乙個成名已久的 框架 通過查詢api和網上的一些部落格 有乙個引數吸引了我的注意 在我的配置中,fitcolumn...