webpack -- vue程式碼分割(codesplit)
為什麼需要做程式碼分割(codesplit)
在vue單頁應用中,若不做任何處理,所有vue檔案會打包為一個檔案,這個檔案非常的大,造成網頁在首次進入時比較緩慢。做了程式碼分割後,會將程式碼分離到不同的bundle中,然後進行按需載入這些檔案,能夠提高頁面首次進入的速度,網站效能也能夠得到提升。
一、未分割時瀏覽器載入js的情況
可以看到,只有一個app.js,大小為595kb,若在實際的大型專案中,這個大小會更大
二、做了程式碼分割後瀏覽器載入js情況
發現多了一個js檔案,且app.js大小也變小了,下面看看點選到其他頁面時載入情況
點到其他頁面後,頁面會依次載入當前頁面的js
三、程式碼中如何使用
該demo中使用的vue版本號為2.5.2,不同版本的使用方式可能會有所不同
1、首先,看一下路由按需載入的做法
下面是修改前的程式碼
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import page1 from '@/page/page1'
import page2 from '@/page/page2'
import page3 from '@/page/page3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/' ,
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/page1',
name: 'page1',
component: page1
},
{
path: '/page2',
name: 'page2',
component: page2
},
{
path: '/page3',
name: 'page3',
component: page3
}
]
})
此時,我們只需將
import page1 from '@/page/page1'
改為
const page1 = () => import('@/page/page1')
這樣,我們在切換路由時便達到按需載入了,怎麼樣,是不是很簡單
2、在元件中按需載入其他元件
我們還是先來看看修改前的程式碼,此時引用元件的方式為傳統正常的方式
import vOther from '@/components/other'
export default {
components: {
vOther
}
}
我們只需做如下修改,便能達到我們想要的效果,將
import vOther from '@/components/other'
改為
const vOther = () => import('@/components/other')
相關推薦
webpack -- vue程式碼分割(codesplit)
為什麼需要做程式碼分割(codesplit) 在vue單頁應用中,若不做任何處理,所有vue檔案會打包為一個檔案,這個檔案非常的大,造成網頁在首次進入時比較緩慢。做了程式碼分割後,會將程式碼分離到不同
使用Webpack的程式碼分離實現Vue懶載入(譯文)
當一個Vue的專案體積變得十分龐大的時候,使用Webpack的程式碼分離功能將Vue Components,routes或Vuex的程式碼進行分離並按需載入,會極大的提高App的首屏載入速度。 在Vue的專案中,我們可以在三種不同的情況下使用懶載入和程式碼分離功能: Vue元
從 vue-cli 到 webpack多入口打包(一)
從三個外掛開始 1、CommonsChunkPlugin commonsChunkPlugin 是webpack中的程式碼提取外掛,可以分析程式碼中的引用關係然後根據所需的配置進行程式碼的提取到指定的檔案中,常用的用法可以歸為四類:(1)、提取node_modules中的模組到一個檔案中;(2)、提
從 vue-cli 到 webpack多入口打包(二)
epo 代碼 添加 text dir 例如 arr 向上 只需要 完成多入口打包配置 上一節我說完了三個關鍵的plugin,通過三個plugin我們可以做到將代碼進行分割,並且將分割的代碼打包到我們指定的路徑下,完成打包的模塊可以被index.html文件正確引用。這裏我
vue筆記 day5(3)webpack&css
1.使用import語法倒入css樣式表 import './css/index.css' 報錯,webpack預設只能打包js處理檔案比如import $ from 'jquery',所以css無法處理 解決方法:需要一個合適loader,第三方loader載入器。
vue專案筆記(3)-Git克隆倉庫程式碼-初始化專案-提交程式碼到遠端倉庫
在程式碼倉庫建立完成之後,通過Git克隆程式碼到本地,具體步驟如下: 1、登入碼雲(https://gitee.com),進入自己的專案中,點選“克隆/下載”,選擇“SSH”,點選“複製”; 2、開啟終端,進入桌面(任意一個空資料夾),執行以下命令,其中[emai
影象語義分割程式碼實現(1)
針對《影象語義分割(1)- FCN》介紹的FCN演算法,以官方的程式碼為基礎,在 SIFT-Flow 資料集上做訓練和測試。 介紹瞭如何製作自己的訓練資料 資料準備 1) 首先 clone 官方工程 git clone https://g
vue2.0+vue-router2.0+axios+webpack開發webapp專案(一)
前言:本人第一次將vue運用到實際專案中,將實際開發流程簡單描述下(第一次寫部落格,有問題希望及時提出,討厭噴子。) 一.安裝node環境 首先我們需要安裝node環境,這個想必不用多說,可以直接到中文官網http://nodejs.cn/下載安裝包。其
vue基礎學習(一)
time tle eight pla use logs new dial for 01-01 vue使用雛形 <div id="box"> {{msg}} </div> <sc
STM32--TIM定時器時鐘分割(疑難)
疑難 計數器 謝謝 term 比例 是什麽 tab 超過 定時 不太明白 (1) TIM_Perscaler來設置預分頻系數; (2) TIM_ClockDivision來設置時鐘分割(時鐘分頻因子); (3) TIM_Counte
初識vue 2.0(2):路由與組件
組件化 script -128 watch css image 暫時 效果 默認 1,在上一篇的創建工程中,使用的的模版 webpack-simple 只是創建了一個簡單的demo,並沒有組件和路由功能,此次采用了webpack模版,自動生成組件和路由。^_^ 在模版初始
vue-cli入門(二)——項目結構
常用 作用 寫到 www. 簡單的 端口 server 標簽 emp 前言 在上一篇項目搭建文章中,我們已經下載安裝了node環境以及vue-cli,並且已經成功構建了一個vue-cli項目,那麽接下來,我們來梳理一下vue-cli項目的結構。 總體框架 一個vue-c
寫在vue總結之前(二)
正是 人的 你是 沒有 輸入 官網 不足 自己的 個人 都說要快速學會一個技術(會使用),比如一個框架,在實際的工作中做相關的項目是最快的學習方式。而為什麽在實際的工作項目中去學習是最快的方式?個人的體會是,在實際的工作項目中,很多功能的實現是你不得不做的,
Vue入門系列(五)Vue實例詳解與生命周期
auto res context mode parent all from bool silent 【入門系列】 【本文轉自】 http://www.cnblogs.com/fly_dragon Vue的實例是Vue框架的入口,其實也就是前端的ViewM
vue學習記錄(一)—— vue開發調試神器vue-devtools安裝
shell gist 項目 擴展工具 code blog manifest false .net 網上有些貼子少了至關重要的一步導致我一直沒裝上, 切記!!install後還需build,且install和build都在vue-devtools文件夾內執行 github下載
Vue深度學習(1)
msg 第一個 數據綁定 vue.js 這就是 one round 本質 dex Hello World 現在就讓我們來寫第一個vue.js的實例。如下代碼: html代碼: <div id="demo"> {{ message }}
Vue深度學習(4)-方法與事件處理器
() 一個 span 修飾 語句 特殊變量 方法 left stop 方法處理器 可以用 v-on 指令監聽 DOM 事件: <div id="app"> <button v-on:click = "greet">Greet<
Vue深度學習(5)-過渡效果
round handle urn ati 根據 enter index 好的 ecan 簡介 通過 Vue.js 的過渡系統,你可以輕松的為 DOM 節點被插入/移除的過程添加過渡動畫效果。Vue 將會在適當的時機添加/移除 CSS 類名來觸發 CSS3 過渡/動畫效果,
vue入門練習(一)
col pre 全局 run -c 初始 handbook serve 回車 1.安裝node,webpack node -v //查看已安裝版本 npm install -g webpack //安裝webpack npm install -g web
vue-cli教程(一)
版本 目錄 pat api when 自動 ats template his 1.安裝vue-cli 再安裝完成npm之後,利用npm安裝vue-cli,全局安裝:npm insall -g vue-cli。倘若npm速度慢,建議替換為cnpm(https://npm.ta