在vue-cli中已對打包速度進行了優化,但是在大型專案的情況下打包速度還是會變慢,各大廠在打包js檔案作出了很多優化,參考了網易公司前端開發的vue專案進行了總結:
檔案修改
const path = require(
'path');
cosnt uglifyjsplugin = require(
'uglifyjs-webpack-plugin');
//生產環境
const isproduction = process.env.mode_env ==
='production'
; //引入檔案的方法
function resolve(dir)
module.export =}}
}, //css配置
css: }},
//webpack配置
chainwebpack:config =
>
) //cdn
}//測試環境
},configurewebpack: config =
>})
)}else
}, //生產環境
productionsourcemap: false,
//預設併發數: os.cpus(
).length -1
//啟用並執行
parellel: require(
'os'
).cpus(
).length > 1,
}
在專案中引入路由大多是增加乙個模組 去路由檔案router.js
import
乙個路由,如果專案中有200頁面,需要引入200個路由,增加了維護難度,參考網易公司專案的優化如下,在路由檔案去遍歷views
檔案下路由檔案,然後統一新增
import vue from 'vue'
;import router from 'vue-router'
;import home from './views/home.vue'
; const routerlist =
;function importall(r)
//api
//第乙個引數 目標資料夾
//第二個引數 是否查詢子集
//第三個引數 正則匹配
importall(require.context(
'./router', true, /\.router\.js/))
vue.use(router)
export default new router(]}
)
vue之打包優化
最近寫專案,4個平台的專案由乙個 庫管理,超過50個.vue檔案,導致 量過大,每次構建打包速度都很慢,下面是針對vue打包構建優化的一些測試結果 第一次npm run dev 第一次npm run build構建 優化修改如下 1,採用cdn載入ui庫,把不常改變的庫放到index.html中,通...
Vue專案打包優化
專案寫完了,專案需要打包才能上線 打包命令 yarn build 打包完目錄檔案的說明 帶 chunk vendors 的都是 第三方的依賴包 打完包的 可以直接於伺服器環境根目錄執行 不需要額外配置 外掛程式 live server 全域性安裝 npm i live server g 啟動 只需要...
刪除vue打包大小限制 vue 打包優化大小
yarn run build report file size gzipped dist js chunk vendors.df6b5bce.js 141.57 kib 49.51 kib 以上命令,build 後會生成report.html,該檔案顯示引用的依賴包大小。image.png 主要為v...