專案上線-CDN

專案上線

對專案進行打包, 將打包後的內容,部署到伺服器中
打包 : npm run build
把打好的包放到 http-server 裡面,演示

第一次截圖

1. 介紹 vendor : 裡面放一些第三方包 vue/vue-router/element-ui 包等
   只要不是我們自己寫的程式碼,都屬於第三方
2. 優化 :
   2.1 優化打包的第三方 (CDN)
   2.2 按需載入

   首屏載入時間,是衡量一個網站效能快慢的很重要的一個指標,
   首屏載入時間越快,使用者存留就越多,使用者量就越高
   如何提高載入速度呢?
   //1. 只載入首屏中看到的內容, 沒有看到的內容都不載入,需要用到的時候,再去載入
   //2. 進來減少首屏的請求次數
   //3. vue 專案打包的時候,如何實現按需載入功能 ?
   // 實現說明 : vue 的非同步元件(路由) 配合 webpack 程式碼分割的功能,很容易實現按需載入功能
   // 如何在專案中,通過程式碼實現按需載入呢 ? 講匯入元件的位置, 改為動態載入

3. 按需載入 : 參考 : vue-router => 路由欄載入
   const Home = () => import(’@/components/Home/Home.vue’)

4. 打包檢視 js 檔案

第二次擷取

1. 檢視多的 js 檔案
2. 重新打包執行,演示點選進入按需載入
3. 打包 GoodsAdd 和 Goods 在一起的包
   const Goods = () =>
   import(/_ webpackChunkName:‘goods’ / ‘@/components/Goods/Goods.vue’)
   const GoodsAdd = () =>
   import(/ webpackChunkName:‘goods’ _/ ‘@/components/GoodsAdd/GoodsAdd.vue’)

第三次截圖

1. 名字是 goods
2. 檔案也少了一個

CDN

為什麼打包後,第三方檔案體積很大,因為第三方檔案比較多
如何優化 ?? 不再將第三方檔案 打包到 dist, 但是, 專案中還是要是要第三方檔案,我們通過一個線上的
的第三方檔案路徑, 來引入這個檔案,(CDN)

1. 在 index.html 引入 CDN 檔案
2. 在 webpack.base.conf.js

externals : {
  vue : 'Vue',
  "vue-router" : "VueRouter"
}

3. 其他配置

4. 以後使用 :
   4.1 bootstrap => bootCDN
   4.2 https://www.jsdelivr.com/
   4.3 官方文件

---

專案打包和優化

• 打包命令：npm run build

按需載入

• 1 修改 router/index.js 中匯入元件的語法

// 使用：
const Home = () => import('@/components/home/Home');
// 替換：
// import Home from '@/components/home/Home'

// 給打包生產的JS檔案起名字
const Home = () =>
  import(/* webpackChunkName: 'home' */ '@/components/home/Home');

// chunkName相同，將 goods 和 goods-add 兩個元件，打包到一起
const Goods = () =>
  import(/* webpackChunkName: 'goods' */ '@/components/goods');
const GoodsAdd = () =>
  import(/* webpackChunkName: 'goods' */ '@/components/goods-add');

• 2 （該步可省略）修改 /build/webpack.prod.conf.js 中的 chunkFilename

{
  // [name] 代替 [id]
  chunkFilename: utils.assetsPath('js/[name].[chunkhash].js');
}

使用 CDN

• 開源專案 CDN 加速服務

• 1 在 index.html 中引入 CDN 提供的 JS 檔案

• 2 在 /build/webpack.base.conf.js 中（resolve 前面）新增配置 externals

• 注意：通過 CDN 引入 element-ui 的樣式檔案後，就不需要在 main.js 中匯入 element-ui 的 CSS 檔案了。所以，直接註釋掉 main.js 中的匯入 element-ui 樣式即可

• externals配置：

externals: {
  // 鍵：表示 匯入包語法 from 後面跟著的名稱
  // 值：表示 script 引入JS檔案時，在全域性環境中的變數名稱
  vue: 'Vue',
  axios: 'axios',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',

  BMap: 'BMap',
  echarts: 'echarts',
}

import ElementUI from 'element-ui'

常用包 CDN

• vue

• vue-router

• axios

• element-ui JS

• element-ui CSS

• 說明：

  • 1 先在官方文件查詢提供的 CDN
  • 2 如果沒有，在 https://www.bootcdn.cn/ 或其他 CDN 提供商 查詢

Quill

• vue-quill-editor Quill

<!-- Include the Quill library -->
<script src="https://cdn.bootcss.com/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

<!-- Include stylesheet -->
<link
  href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.min.css"
  rel="stylesheet"
/>