优化记录

优化一、白屏

vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成相对当前目录，然后再次运行npm run build 就可以在本地打开index.html。 在vue.config解决打包白屏，使用相对路径

 publicPath: './',

优化二、路由模式打包

const createRouter = () => new Router({
  mode: 'history',

})

优化三、路由懒加载

作用：没设置路由懒加载前：所有页面对应的组件会全部打包到一个.js文件中， 设置在路由懒加载后页面对应的组件会全部打包到一个独立.js文件中，而且只有在进入这个路由页面之后才会加载。

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

优化四、路由懒加载下的——魔法注释

作用：把对应的加了魔法注释的路由数据，分类打包成一个js文件，不会放到一起。

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");

优化五、组件懒加载

作用：只有进入这个组件才加载，不是一进来就加载，他的返回值就是Promise

例如:组件daLog.vue

export default:{
components:{
componet:()=>import("./components/daLong.vue")
},
        data(){
        return
        }
}

优化六、生成打包报告--report

或者使用插件:vue-ui

 "build:prod": "vue-cli-service build --report",

优化七、第一种方法去除console.log();

安装插件： 安装完成后项目目录会新增一个 babel.config.js 的文件，在此文件中新增 transform-remove-console 即可

yarn add babel-plugin-transform-remove-console

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    // 开发环境下
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
    },
    // 生产环境
    'production': {
    // 添加transform-remove-console，表示只在生产环境去掉console
      'plugins': ['dynamic-import-node', 'transform-remove-console']
    }
  }
}

第二种方法用webpack的方式

在vue.config.js中，配置

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

优化八 去除打包项，webpack打包瘦身

先找到 vue.config.js， 添加 externals 项，具体如下：

const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// 定义一个空的externals判断如果是生产环境，就把下面这些包排除掉
let externals = {}
console.log(process.env.NODE_ENV === 'production', '获取环境变量')
if (process.env.NODE_ENV === 'production') {
// 表示上线
  externals = {
  /**
   * externals 对象属性解析。
   *  基本格式：
   *     '包名' : '在项目中引入的名字'
   *
 */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX',
    '@antv/g2': 'G2',
    '@antv/data-set': 'DataSet'
  }
}

==================第二步排除打包项调用变量externals
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    // 排除打包项
    externals: externals,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

第二步：上面这些包，已经排除了，在dist打包文件中但是又要用到这些包，所以我们就在public文件中引入这些包

这里用if判断：是因为本地加载也会加载CDN，线上加载也会加载CND,这样就会报错，所以用if判断环境变量走的是生成环境才会走CDN。

<% if(process.env.NODE_ENV==='production'){%>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js"></script>
  <%} %>

优化九：登录和注册进行防抖和节流优化

优化十：抽离公共逻辑到minin中，减少请求

import { getRoles } from '@/api/settings'
import { toDo } from '@/utils/index.js'
import { getPermissionList } from '@/api/permission'
export default {
// 组件中有的方法，都可以使用。
  created() {

  },

  data() {
    return {
      listPr: [],
      list: []
    }
  },
  methods: {
    async getRoleList() {
      // 获取角色列表
      const res = await getRoles()
      this.list = res.data.rows
      //  获取账户以及拥有的角色
    },
    async loadPermissionList() {
      const res = await getPermissionList()
      this.listPr = toDo(res.data)
    }
  }
}

优化十一：减少重绘和回流