vue项目优化

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 修改如下

• 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

这里lodash的使用方式修改成

import CopyArray from 'lodash/cloneDeep'
import CopyArray from 'lodash'

vue-quill-editor （static 模式）

vue-quill-editor 没有sdn 在static下面把源代码copy进去

2

index.html 中引入即可

main.js 修改如下

Vue.use(window.VueQuillEditor)

最后loading遮盖 index.html文件

这样代码在没有加载到app.js和vender.js的时候先展示loading内容，

    

    // 加入你的loading代码 请勿加图片
    
 

一下展示一下我的loading动图

最终优化结果

3

总结至此，我想如果以后需要优化项目小伙伴就可以按照这个流程进行，当然这个只是我目前所用所想，希望大家能够给我指正，并且加以补充！