vue-cli2.x項(xiàng)目優(yōu)化之引入本地靜態(tài)庫文件的方法
更新時間：2018年06月19日 14:36:17 作者：山水一程
這篇文章主要介紹了vue-cli2.x項(xiàng)目優(yōu)化之引入本地靜態(tài)庫文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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 同級）。
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter'
},
優(yōu)化后，速度對比
| 優(yōu)化前編譯時長 | 優(yōu)化后編譯時長 | 優(yōu)化前build時長 | 優(yōu)化后build時長 |
|---|---|---|---|
| 300~400ms | 200ms左右 | 8435ms | 4332ms |
優(yōu)化前文件大?。?br />
優(yōu)化后文件大?。?br />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
element table組件內(nèi)容換行的實(shí)現(xiàn)方案
這篇文章主要介紹了element table組件內(nèi)容換行的實(shí)現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue組件模板及組件互相引用代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題
這篇文章主要介紹了淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3+Three.js實(shí)現(xiàn)為模型添加點(diǎn)擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點(diǎn)擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標(biāo)位置；然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章評論和回復(fù)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06