vue-cli2.x項(xiàng)目?jī)?yōu)化之引入本地靜態(tài)庫(kù)文件的方法
更新時(shí)間：2018年06月19日 14:36:17 作者：山水一程
這篇文章主要介紹了vue-cli2.x項(xiàng)目?jī)?yōu)化之引入本地靜態(tài)庫(kù)文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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)化前文件大?。?br />
優(yōu)化后文件大小：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-router傳遞參數(shù)的幾種方式實(shí)例詳解
vue-router傳遞參數(shù)分為兩大類(lèi)，一類(lèi)是編程式的導(dǎo)航 router.push另一類(lèi)是聲明式的導(dǎo)航 <router-link>，本文通過(guò)實(shí)例代碼給大家介紹vue-router傳遞參數(shù)的幾種方式，感興趣的朋友跟隨小編一起看看吧2018-11-11
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。2020-03-03
使用Karma做vue組件單元測(cè)試的實(shí)現(xiàn)
這篇文章主要介紹了使用Karma做vue組件單元測(cè)試的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
跨域指瀏覽器不允許當(dāng)前頁(yè)面的所在的源去請(qǐng)求另一個(gè)源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
簡(jiǎn)單實(shí)現(xiàn)vue中的依賴(lài)收集與響應(yīng)的方法
這篇文章主要介紹了簡(jiǎn)單實(shí)現(xiàn)vue中的依賴(lài)收集與響應(yīng)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue業(yè)務(wù)實(shí)例之組件遞歸及其應(yīng)用
目中出現(xiàn)多級(jí)菜單時(shí),需要多層for循環(huán)時(shí),但是當(dāng)菜單增加層級(jí)時(shí),需要在頁(yè)面結(jié)構(gòu)中增加一層for循環(huán),這時(shí)我們可以使用組件遞歸的思想來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue業(yè)務(wù)實(shí)例之組件遞歸及其應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue組件傳值的實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue組件傳值的實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js組建傳值的三種實(shí)現(xiàn)方式,包括父?jìng)髯?、子傳父及非父子傳?需要的朋友可以參考下2020-02-02
簡(jiǎn)單聊一聊axios配置請(qǐng)求頭content-type
最近在工作中碰到一個(gè)問(wèn)題,后端提供的get請(qǐng)求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了淺談Vue.js 組件中的v-on綁定自定義事件理解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11