### 第三方庫引用CDN
- 對于`vue`、`vue-router`、`vuex`、`axios`和`iView`等不經常改動的第三方庫,我們不對他們進行打包,通過`CDN`引入,可以減少代碼的大小
- 配置`vue.config.js`
``` javascript
module.exports = {
...
// 部署CDN優化
configureWebpack: {
// 排除
externals: {
vue: 'Vue',
axios: 'axios',
'vue-router': 'VueRouter',
vuex: 'Vuex',
iview: 'iview'
}
}
...
}
```
- `index.html`中引入CDN地址
``` html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iview/3.4.1/iview.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iview/3.4.1/styles/iview.css" />
```
### 全站CDN
- 由于動態路由導致打包后部分文件較大,因此可將打包生成的較大的js或css文件放置CDN或著帶寬較快的服務器上或者第三方平臺(如七牛云),更換相應index.html中js鏈接
### 開啟GZIP
- 安裝 [compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin) 插件
~~~
npm install compression-webpack-plugin --save-dev
~~~
* 在 vue.config.js 中添加配置
``` javascipt
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
...
configureWebpack: {
// GZIP壓縮
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, // 匹配文件
threshold: 10240 // 對超過10k文件壓縮
})
]
}
...
}
```
`npm run build`后能看到生成的 `.gz` 文件,同時服務器也需要配置開啟`GZIP`
<img src="https://ooo.0o0.ooo/2019/05/01/5cc9b6c04daf1.png" alt="WX20190501-230935@2x.png" title="WX20190501-230935@2x.png" width="400px" />
- Nginx配置
```
http {
...
# 開啟GZIP
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 9;
...
```
- 前言&版本說明
- 概念
- XBoot 是什么?
- 系統架構
- 主要使用的開源組件
- 角色控制訪問權限(RBAC)
- 用戶手冊
- 系統配置
- 工作流使用配置
- 定時任務調度
- 智能助手客服機器人
- 項目本地運行
- 后端運行
- 前端運行
- 項目結構說明
- 附:使用Oracle等數據庫
- 模塊化版本
- 后端開發指南
- 基本開發指南
- 前后端數據交互標準
- 工具類及數據權限
- 代碼生成器-30秒搞定CRUD
- 增刪改查CRUD
- 日志類型注解擴展
- 邏輯刪除
- 各驗證碼使用及配置
- 接口文檔使用及認證
- 前端開發指南
- 基本開發指南
- 主題/Logo/首頁等配置
- 路由菜單配置
- 多語言國際化配置
- 自定義圖標icon
- 工具類及數據獲取
- 其他說明
- 完整版開發指南
- 前端Vue代碼生成器
- Activiti工作流
- 單點登錄配置
- 智能助手/客服機器人
- MinIO對象存儲服務搭建
- 第三方社交賬號配置
- 短信開發/站內消息/郵件
- Vaptcha驗證碼
- 禁用詞使用
- 前端移除CDN
- 其他說明
- 開放平臺及單點登錄
- 開放平臺使用指南
- Web接入開發流程
- 單點登錄開發指南
- 微信小程序端開發指南
- 項目導入與開發必讀
- 業務組件
- 產品組件(小)
- 產品組件(大)
- 優惠券組件
- 評論列表組件
- 紅包組件
- 推薦商品組件
- 頁面設計
- 商品詳情頁及SKU設計
- 通用方法工具類說明
- 開發經驗與踩坑分享
- Uniapp端開發指南
- APP后端開發指南
- Uniapp前端開發指南
- 開發新功能示例
- 后端開發新模塊
- 前端開發新頁面
- 測試
- SonarQube代碼質量管理
- TestNG單元測試
- ExtentReports測試報告
- Selenuim自動化Web測試
- Appuim自動化App測試
- JMeter壓測性能測試
- 部署
- Spring Boot配置
- 快速部署
- 后端部署
- 前端部署
- 前端部署優化
- Docker容器化部署
- 服務器配置
- 持續集成
- GitLab
- GitLab CI
- XBoot 腳本參考
- Jenkins
- Jenkins安裝
- XBoot CI參考
- DevOps環境搭建
- 組件安裝列表
- 開發設計規范
- 分支管理
- 數據庫設計規范
- Redis使用規范
- Java基礎開發規范
- Rest API規范
- 項目結構規范
- 前端開發規范
- 前端設計規范
- 項目搭建分享
- 后端相關
- SpringBoot 2.x區別總結
- Spring Security整合JWT
- Spring Security動態權限管理
- Spring Boot 2.x整合Quartz
- Spring Boot 2.x整合Websocket
- Spring Boot 2.x整合Activiti工作流以及模型設計器
- Spring Boot + Security全局跨域配置
- 前端相關
- axios請求封裝 統一異常處理
- 動態路由菜單加載
- 多維度控制權限至按鈕顯示
- 發送消息圖標紅點實時顯示
- 動態組件單頁操作
- XBoot助你【告別996】
- 業務開發踩坑
- 你會用開發神器IDEA嗎
- Lombok你知道多少
- 你還在手動校驗參數嗎
- 你真的會用JPA嗎
- Lamda表達式
- Stream流式API
- 告別資源關閉
- Optional避免null
- 谷歌Guava工具包
- 線程池
- 其他小經驗技巧
- 更新日志及步驟
- 常見問題