vue 项目我们一般都是使用脚手架去配置项目的，在项目开发过程和发布过程我们只需要做大自然的搬运工，但是上线的项目优化却还是需要根据自己项目需求去完成的，工作量不大，却也很麻烦！下面我对上线优化做一个简单的总结，来跟着我的脚步一步一步实现代码瘦身!
首先了解一下浏览器地址输入URL以后经历了什么过程 https://www.jianshu.com/p/7eea6fbc5fcd
1.浏览器的地址栏输入URL并按下回车。
2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3.DNS解析URL对应的IP。
4.根据IP建立TCP连接（三次握手）。
5.HTTP发起请求。
6.服务器处理请求，浏览器接收HTTP响应。
7.渲染页面，构建DOM树。
8.关闭TCP连接（四次挥手）。
我们只需要关心第六步以后的操作，怎么让服务器处理请求的资源能能够小一点。
在vue 项目里面我们使用 * npm run build -report * 查看代码块占比
1
所以先从这几部分优化开始。由于项目需要使用webploader 导致不得不使用jquery 所以这也是需要优化的部分。
-
1.文件资源量少
修改config/index.js
build { productionSourceMap: false, productionGzip： true }1.这样打包文件就少了XXX.map 减少代码量
2.开启压缩文件 ，这个需要后台配合我们浏览器才能优先加载压缩文件，如果浏览器不支持压缩则使用不压缩文件 -
2.文件资源量小
1.提高代码公用率，这是为啥多写组件的原因之一
2.小图标合成雪碧图，减少文件数量以及大小 推荐这个网站压缩图片https://tinypng.com/
路由懒加载
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 官方推荐
需要引入babel
npm install --save-dev @babel/plugin-syntax-dynamic-import
{
path: '/login',
component: () => import('@/pages/login')
},
element-ui 处理成按需加载
- 1.npm install babel-plugin-component -D
- 2.修改 .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
- 3.新建element.js
import {
Pagination,
Dialog
} from 'element-ui'
const element = {
install: function (Vue) {
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
}
}
export default element
- 4.如果需要修改主题颜色
新建element-variables.scss
//$--color-primary: #597d96;
$--color-primary: #0384b1;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// 这是你用到的 组件
@import "~element-ui/packages/theme-chalk/src/pagination.scss";
@import "~element-ui/packages/theme-chalk/src/dialog.scss";
- 5.main.js 引入element.js
import element from './element'
import './element-variables.scss' // 引入主题修改
Vue.use(element)
vue vue-router axios 删除包文件 以sdn 方式引入
- 1.index.html 修改如下
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
-
2.package.json中删除
vue vue-router axios
-
3.修改build/webpack.base.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'jquery': '$',
'axios': 'axios'
}
jquery webuploader lodash
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script>
这里lodash的使用方式修改成
import CopyArray from 'lodash/cloneDeep'
import CopyArray from 'lodash'
vue-quill-editor （static 模式）
vue-quill-editor 没有sdn 在static下面把源代码copy进去
2
index.html 中引入即可
<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.2/quill.bubble.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.js"></script>
<script src="./static/vue-quill-editor/vue-quill-editor.js"></script>
main.js 修改如下
Vue.use(window.VueQuillEditor)
最后loading遮盖 index.html文件
这样代码在没有加载到app.js和vender.js的时候先展示loading内容，
<div id="app">
<div class="page-loading-warp">
// 加入你的loading代码 请勿加图片
</div>
</div>
一下展示一下我的loading动图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<link href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css" rel="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.2/quill.bubble.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script>
<script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.js"></script>
<script src="./static/vue-quill-editor/vue-quill-editor.js"></script>
<style>
.page-loading-warp {
padding: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.ant-spin {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: absolute;
display: none;
color: #0384b1;
text-align: center;
vertical-align: middle;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.ant-spin-spinning {
position: static;
display: inline-block;
opacity: 1;
}
.ant-spin-dot {
position: relative;
display: inline-block;
font-size: 20px;
width: 20px;
height: 20px;
}
.ant-spin-dot-item {
position: absolute;
display: block;
width: 9px;
height: 9px;
background-color: #0384b1;
border-radius: 100%;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.3;
-webkit-animation: antSpinMove 1s infinite linear alternate;
animation: antSpinMove 1s infinite linear alternate;
}
.ant-spin-dot-item:nth-child(1) {
top: 0;
left: 0;
}
.ant-spin-dot-item:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.ant-spin-dot-item:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.ant-spin-dot-item:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.ant-spin-dot-spin {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: antRotate 1.2s infinite linear;
animation: antRotate 1.2s infinite linear;
}
.ant-spin-lg .ant-spin-dot {
font-size: 32px;
width: 32px;
height: 32px;
}
.ant-spin-lg .ant-spin-dot i {
width: 14px;
height: 14px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ant-spin-blur {
background: #fff;
opacity: 0.5;
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1;
}
}
@keyframes antSpinMove {
to {
opacity: 1;
}
}
@-webkit-keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
</style>
<body>
<div id="app">
<div class="page-loading-warp">
<div class="ant-spin ant-spin-lg ant-spin-spinning">
<span class="ant-spin-dot ant-spin-dot-spin">
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
<i class="ant-spin-dot-item"></i>
</span>
</div>
</div>
</div>
</body>
</html>
最终优化结果
3
网友评论