# 前端部署优化
### 第三方库引用CDN
* 对于`vue`、`vue-router`、`vuex`、`axios`和`iView`等不经常改动的第三方库,我们不对他们进行打包,通过`CDN`引入,可以减少代码的大小
* 配置`vue.config.js`
~~~
module.exports = {
...
// 部署CDN优化
configureWebpack: {
// 排除
externals: {
vue: 'Vue',
axios: 'axios',
'vue-router': 'VueRouter',
vuex: 'Vuex',
iview: 'iview'
}
}
...
}
~~~
* `index.html`中引入CDN地址
~~~
<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 中添加配置
~~~
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`
![WX20190501-230935@2x.png](https://ooo.0o0.ooo/2019/05/01/5cc9b6c04daf1.png "WX20190501-230935@2x.png")
* Nginx配置
~~~
http {
...
# 开启GZIP
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 9;
...
~~~
- 前言版本&说明
- 概念
- Tceon-PERFOOT 是什么?
- 系统架构
- 主要使用的开源组件
- 角色控制访问权限(RBAC)
- 用户手册
- 系统配置
- 工作流使用配置
- 定时任务调度
- 项目本地运行
- 后端运行
- 前端运行
- 项目结构说明
- 附:使用Oracle等数据库
- 模块化版本
- 后端开发指南
- 基本开发指南
- 前后端数据交互标准
- 工具类及数据权限
- 代码生成器
- 增删改查CRUD
- 日志类型注解扩展
- 逻辑删除
- 各验证码使用及配置
- 前端开发指南
- 基本开发指南
- 主题/Logo/首页等配置
- 路由菜单配置
- 多语言国际化配置
- 自定义图标icon
- 工具类及数据获取
- 完整版开发指南
- 前端Vue代码生成器
- Activiti工作流
- 单点登录配置
- MinIO对象存储服务搭建
- 第三方社交账号配置
- 短信开发/站内消息/邮件
- Vaptcha验证码
- 禁用词使用
- Monaco代码编辑器
- 开放平台及单点登录
- 开放平台使用指南
- Web接入开发流程
- 单点登录开发指南
- 微信小程序端开发指南
- 项目导入与开发必读
- 通用方法工具类说明
- Uniapp端开发指南
- APP后端开发指南
- Uniapp前端开发指南
- 开发新功能示例
- 后端开发新模块
- 前端开发新页面
- 测试
- SonarQube代码质量管理
- TestNG单元测试
- ExtentReports测试报告
- Selenuim自动化Web测试
- Appuim自动化App测试
- JMeter压测性能测试
- 部署
- Spring Boot配置
- 快速部署
- 后端部署
- 前端部署
- 前端部署优化
- Docker容器化部署
- 服务器配置
- 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请求封装 统一异常处理
- 动态路由菜单加载
- 多维度控制权限至按钮显示
- 发送消息图标红点实时显示
- 动态组件单页操作
- 常见问题