项目优化策略

1、生成打包报告
2、第三方库启用cdn
3、element-ui 按需加载
4、路由懒加载
5、首页内容定制

• 通过nprogress添加进度条效果

main.js

cnpm i nprogress -S

import './permissions'

permissions.js

import store from './src/store/index'
import router from './src/router/index'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式

const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  var tokenStr = window.sessionStorage.getItem('token');
  if (tokenStr) {
    if (to.path === '/login') {
      next()
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      next();
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // 结束Progress
})

• 在执行所有build期间移除所有的console(babel.plugin.transform.console)参考官方

npm install babel-plugin-transform-remove-console --save-dev

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    'transform-remove-console'
  ]
}

只在发布阶段清除所有的console

// 这是项目发布阶段需要用到的babel插件
const prodPlugins = [];
if(process.env.NODE_ENV == 'production'){
  prodPlugins.push('transform-remove-console');
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  //发布产品时的插件数组
  ...prodPlugins
}

• 生成打包报告

方法一：控制台输入vue-cli-service build --report
方法二：UI面板

• 通过vue.config.js更改配置项
• 为开发模式和发布模式指定不同的打包入口
  默认情况下，vue的开发模式与发布模式共同用一个打包入口文件（src/main.js）,为了将项目的开发过程与发布过程分离，我们可以为两种模式，指定各自的入口文件，即
  开发模式的入口文件：main-dev.js
  发布模式的入口文件：main-prod.js
  configerWebpack 和chainWebapck(链式编程)
  vue.config.js

module.exports = {
  chainWebpack:config => {
    config.when(process.env.NODE_ENV === 'production',config => {
      config.entry('app').clear().add('./src/main-prod.js');
    })

    config.when(process.env.NODE_ENV === 'development',config => {
      config.entry('app').clear().add('./src/main-dev.js');
    })
  }
}

参考参考

• 通过externals加载外部CDN资源