成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue 優(yōu)化CDN加速

fancyLuo / 3053人閱讀

摘要：代碼敲完，項目上線，然后就要與優(yōu)化相遇。同理優(yōu)化之前優(yōu)化之后另外就是花點錢提高了下帶寬后面有其他優(yōu)化再更新，很多東西是摸索理解的，僅供參考

代碼敲完，項目上線，然后就要與優(yōu)化相遇。

項目有搶購的性質(zhì)content download 時間非常的長加載慢的很，至此開始前端優(yōu)化之旅

項目根目錄運行

npm install webpack-bundle-analyzer --save-dev

在build/webpack.dev.conf.js中引入

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
 plugins: [
    new BundleAnalyzerPlugin()
  ]

運行后顯示可以看到幾個大的js 下面是已經(jīng)優(yōu)化過后的截圖
像vue ，vue-router，vuex，axios，mint-ui，crypto-js

1.使用CDN資源

使用cdn在index.html中引入

修改build/webpack.base.conf.js文件，externals外部擴展，通過這種方式引入依賴庫，不需要webpack處理。

module.exports = {
  ...
  externals: {
    "vue": "Vue", // 左側(cè)vue是我們自己引入時候要用的，右側(cè)是開發(fā)依賴庫的主人定義的不能修改
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "axios": "axios",
    "mint-ui": "MINT",
    "crypto-js": "CryptoJS"
  }
  ...
}
console.log(window) 打印出下圖

網(wǎng)上查了資料有的引入有的還是會引入有的沒有引入，拿mint-ui舉例，查到的資料在main.js有下面的引入，但是注釋掉之后還是可以正常使用mint-ui的組件，import VueRouter from "vue-router" 也是可以注釋掉使用的，感覺是因為window全局有了VueRouter,但是有個問題就是eslint會報警告，所以就沒有注釋掉。如果理解有誤希望大家能指出我的錯誤

import MINT from "mint-ui"
Vue.use(MINT)

main.js

import Vue from "vue" // 沒有注釋掉是因為main.js其他地方用到了Vue,如果沒有用到可以注釋掉
import App from "./App"
import router from "./router"
import store from "./store"

router/index.js

// import Vue from "vue" // 注釋掉
// Vue.use(VueRouter) // 注釋掉
import VueRouter from "vue-router" // 文件中引入的時候用我們自己定義的vue-router
const appRouter = {
....
}
export default new VueRouter(appRouter)

store/index.js

// import Vue from "vue" // 注釋掉
// Vue.use(Vuex) // 注釋掉
import Vuex from "vuex"
const store = new Vuex.Store({
  ....
})
export default store

CryptoJS用來加密，在使用的地方直接引入。axios同理

import CryptoJS from "crypto-js"
.....

優(yōu)化之前

優(yōu)化之后

另外就是花點錢提高了下帶寬o(╯□╰)o

后面有其他優(yōu)化再更新，很多東西是摸索理解的，僅供參考~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97719.html

相關(guān)文章

  • WEB前端性能優(yōu)化

    摘要：頁面渲染初始化盒子模型相關(guān)屬性變化窗口事件觸發(fā)結(jié)構(gòu)變化，比如刪除了某個節(jié)點獲取某些屬性，引發(fā)回流很多瀏覽器會對回流做優(yōu)化，他會等到足夠數(shù)量的變化發(fā)生，在做一次批處理回流。使用框架出現(xiàn)了首屏性能渲染問題。 請求過程中一些潛在的性能優(yōu)化點 深入理解http請求的過程是前端性能優(yōu)化的核心！ dns是否可以通過緩存減少dns查詢時間？ 網(wǎng)絡(luò)請求的過程走最近的網(wǎng)絡(luò)環(huán)境？ 相同的靜態(tài)資源是否...

    raoyi 評論0 收藏0

  • vue項目優(yōu)化--使用CDN和Gzip

    摘要：使用構(gòu)建的項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實現(xiàn)以我個人項目為例我的項目中引入了以下模塊。 使用vue-cli構(gòu)建的vue項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣...

    番茄西紅柿 評論0 收藏0

  • vue項目優(yōu)化--使用CDN和Gzip

    摘要：使用構(gòu)建的項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實現(xiàn)以我個人項目為例我的項目中引入了以下模塊。 使用vue-cli構(gòu)建的vue項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣...

    Object 評論0 收藏0

  • vue-cli3.0 資源加載的優(yōu)化方案

    摘要：更新今天反復(fù)試了，不用區(qū)分測試環(huán)境還是生產(chǎn)環(huán)境，統(tǒng)一都用就可以了背景之前自己搭建了一個的后臺項目，坑很多，其中一個就是資源加載的方案，由于是后臺項目，之前一直沒放在心上，看到一些資源優(yōu)化方案后，覺得有必要弄一下。 20180829 更新 今天反復(fù)試了，不用區(qū)分 測試環(huán)境還是 生產(chǎn)環(huán)境，統(tǒng)一都用 cdn 就可以了 背景 之前自己搭建了一個 vue + tp5.1 的后臺項目（https:...

    yzzz 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<