vue-cli2.x項(xiàng)目?jī)?yōu)化之引入本地靜態(tài)庫(kù)文件的方法
demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource
vue-cli 將靜態(tài)資源文件放到 static 文件夾下并引用:
1.將 node_modules 下相應(yīng)的 xxx.min.js,復(fù)制到項(xiàng)目 static 文件夾下
2.index.html 修改
添加script引入
<script src="static/js/vue.min.js"></script> <script src="static/js/vue-router.min.js"></script>
3.修改 build/webpack.base.conf.js 文件:
注釋掉下面這行
resolve: { extensions: ['.js', '.vue', '.json'], alias: { // 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },
添加externals部分(externals 和 resource 同級(jí))。
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter' },
優(yōu)化后,速度對(duì)比
優(yōu)化前編譯時(shí)長(zhǎng) | 優(yōu)化后編譯時(shí)長(zhǎng) | 優(yōu)化前build時(shí)長(zhǎng) | 優(yōu)化后build時(shí)長(zhǎng) |
---|---|---|---|
300~400ms | 200ms左右 | 8435ms | 4332ms |
優(yōu)化前文件大小:
優(yōu)化后文件大?。?br />
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element table組件內(nèi)容換行的實(shí)現(xiàn)方案
這篇文章主要介紹了element table組件內(nèi)容換行的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12vue配置生產(chǎn)環(huán)境.env.production與測(cè)試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測(cè)試環(huán)境.env.development方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題
這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08Vue3+Three.js實(shí)現(xiàn)為模型添加點(diǎn)擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點(diǎn)擊事件監(jiān)聽(tīng),具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個(gè)Vector2對(duì)象來(lái)獲取鼠標(biāo)位置;然后,創(chuàng)建一個(gè)Raycaster對(duì)象來(lái)投射光線2024-10-10詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04分享7個(gè)成為更好的Vue開(kāi)發(fā)者的技巧
作為使用Vue已經(jīng)很多年的人,特別是去年一直在使用?Vue3,因此,學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個(gè)讓我們成為更好?Vue?開(kāi)發(fā)者的技巧,需要的可以參考一下2022-06-06