Skip to content

Commit c0c02ca

Browse files
calebmancalebman
committed
update readme and docs
1 parent 0eb754a commit c0c02ca

File tree

5 files changed

+106
-4
lines changed

5 files changed

+106
-4
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
- [控件封装与使用](https://github.com/calebman/vue-DBM/blob/master/docs/render.md)
5757
- [混入](https://github.com/calebman/vue-DBM/blob/master/docs/mixins.md)
5858
- [数据模拟](https://github.com/calebman/vue-DBM/blob/master/docs/mock.md)
59+
- [打包优化与用户体验](https://github.com/calebman/vue-DBM/blob/master/docs/package.md)
5960

6061
## 目标功能
6162

‎build/webpack.base.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ module.exports = {
2727
'vue': 'Vue',
2828
'vue-router': 'VueRouter',
2929
'vuex': 'Vuex',
30-
'moment': 'moment'
30+
'moment': 'moment',
31+
'element-ui': 'ELEMENT'
3132
},
3233
resolve: {
3334
extensions: ['.js', '.vue', '.json'],

‎docs/package.md

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
## 基于vue-cli脚手架的打包优化与用户体验
2+
3+
### 1. 做哪部分的优化
4+
5+
* cdn优化
6+
* 路由懒加载
7+
* 其他优化
8+
* 用户体验
9+
10+
### 2. cdn优化
11+
12+
> 类似于vue、vue-router、moment、element-ui等提供了cdn的架或者工具类可在index.html中直接引入，然后配置webpack的externals使其不加入打包配置，从而减小app.js、vendor.js的体积
13+
14+
* 在index.html使用cdn引入依赖库
15+
16+
```html
17+
<!-- 网络请求工具类 -->
18+
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
19+
<!-- vue -->
20+
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
21+
<!-- vue-router -->
22+
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
23+
<!-- vuex -->
24+
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
25+
<!-- momentjs的中文包 -->
26+
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
27+
<!-- momentjs -->
28+
<script src="https://cdn.bootcss.com/moment.js/2.22.1/locale/zh-cn.js"></script>
29+
<!-- element-ui样式 -->
30+
<script src="https://cdn.bootcss.com/element-ui/2.3.6/theme-default/index.css"></script>
31+
<!-- element-ui -->
32+
<script src="https://cdn.bootcss.com/element-ui/2.3.6/index.js"></script>
33+
```
34+
35+
* 配置build文件夹下webpack.base.conf.js文件
36+
37+
```javascript
38+
module.exports = {
39+
// ...
40+
externals: {
41+
'axios': 'axios',
42+
'vue': 'Vue',
43+
'vue-router': 'VueRouter',
44+
'vuex': 'Vuex',
45+
'moment': 'moment',
46+
'element-ui': 'ELEMENT'
47+
}
48+
}
49+
```
50+
51+
### 3. 路由懒加载
52+
53+
> 路由懒加载能够将代码根据路由配置进行分割，加快首屏渲染的速度，在大型的单页应用中是必不可少的
54+
>
55+
> 参见[路由管理](https://github.com/calebman/vue-DBM/blob/master/docs/router.md)的实现
56+
57+
### 5. 其他优化
58+
59+
* 尽量少的注册全局组件，使用UI框架可以参考文档做按需加载
60+
* 可以和服务端配合采用gzip压缩，减少传输耗时
61+
* 在更新不是很频繁的应用可考虑提高缓存时间
62+
* 例如moment、lodash这种庞大的工具库在使用的功能不多的情况下可考虑寻找替代品
63+
64+
### 6. 用户体验
65+
66+
> 一个单页应用到了一定规模不管怎么优化首屏渲染还是一个比较慢的过程，此时可以考虑在首屏渲染时使用一个加载动画告诉用户系统正在初始化
67+
68+
* 首先在index.html中定义一个渲染动画
69+
70+
```html
71+
<body>
72+
<div id="app"></div>
73+
<!-- 首屏渲染时的加载动画 -->
74+
<div id="system-loading" class="showbox">
75+
<div class="loader">
76+
<svg class="circular" viewBox="25 25 50 50">
77+
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
78+
</svg>
79+
</div>
80+
<div class="text">
81+
<span>系统初始化中...</span>
82+
</div>
83+
</div>
84+
<!-- built files will be auto injected -->
85+
</body>
86+
```
87+
88+
* 然后再App.vue组件的mounted钩子中移除这个loading
89+
90+
```javascript
91+
export default {
92+
// ...
93+
mounted() {
94+
document.body.removeChild(document.getElementById("system-loading"));
95+
}
96+
};
97+
```
98+

‎index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
1010
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
1111
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
12-
<script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.min.js"></script>
13-
<script src="https://cdn.bootcss.com/moment.js/2.22.0/locale/zh-cn.js"></script>
12+
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
13+
<script src="https://cdn.bootcss.com/moment.js/2.22.1/locale/zh-cn.js"></script>
14+
<script src="https://cdn.bootcss.com/element-ui/2.3.6/theme-chalk/index.css"></script>
15+
<script src="https://cdn.bootcss.com/element-ui/2.3.6/index.js"></script>
1416

1517
<title>数据管理系统</title>
1618
<link type="text/css" href="static/local/index-loading.css" rel="stylesheet">

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"element-ui": "2.3.6",
1919
"mockjs": "1.0.1-beta3",
2020
"moment": "2.22.1",
21-
"vue": "^2.5.2",
21+
"vue": "^2.5.16",
2222
"vue-router": "^3.0.1",
2323
"vuex": "3.0.1",
2424
"vuex-persistedstate": "^2.5.0",

0 commit comments

Comments
 (0)