亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue 優(yōu)化CDN加速

fancyLuo / 3093人閱讀

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

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

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

項(xiàng)目根目錄運(yùn)行

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

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

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

運(yùn)行后顯示可以看到幾個(gè)大的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外部擴(kuò)展，通過這種方式引入依賴庫，不需要webpack處理。

module.exports = {
  ...
  externals: {
    "vue": "Vue", // 左側(cè)vue是我們自己引入時(shí)候要用的，右側(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" 也是可以注釋掉使用的，感覺是因?yàn)閣indow全局有了VueRouter,但是有個(gè)問題就是eslint會報(bào)警告，所以就沒有注釋掉。如果理解有誤希望大家能指出我的錯(cuò)誤

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

main.js

import Vue from "vue" // 沒有注釋掉是因?yàn)閙ain.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" // 文件中引入的時(shí)候用我們自己定義的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)化之后

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

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

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

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

相關(guān)文章

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

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

    raoyi 評論0 收藏0

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

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

    番茄西紅柿 評論0 收藏0

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

    摘要：使用構(gòu)建的項(xiàng)目，在打包發(fā)布的時(shí)候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實(shí)現(xiàn)以我個(gè)人項(xiàng)目為例我的項(xiàng)目中引入了以下模塊。 使用vue-cli構(gòu)建的vue項(xiàng)目，在打包發(fā)布的時(shí)候，發(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)一都用就可以了背景之前自己搭建了一個(gè)的后臺項(xiàng)目，坑很多，其中一個(gè)就是資源加載的方案，由于是后臺項(xiàng)目，之前一直沒放在心上，看到一些資源優(yōu)化方案后，覺得有必要弄一下。 20180829 更新 今天反復(fù)試了，不用區(qū)分 測試環(huán)境還是 生產(chǎn)環(huán)境，統(tǒng)一都用 cdn 就可以了 背景 之前自己搭建了一個(gè) vue + tp5.1 的后臺項(xiàng)目（https:...

    yzzz 評論0 收藏0

發(fā)表評論

0條評論

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