VUE后台管理系统项目优化

VUE后台管理系统项目优化

1、生成打包报告

通过可视化的UI面板直接查看报告，在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。

2、 通过 vue.config.js 修改 webpack 的默认配置

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
① 开发模式的入口文件为 src/main-dev.js
② 发布模式的入口文件为 src/main-prod.js
chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置

通过 chainWebpack 自定义打包入口 ：

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') 
    }) 
  } 
}

3、 通过 externals 加载外部 CDN 资源

具体配置代码如下：

  vue: 'Vue', 
  'vue-router': 'VueRouter', 
  axios: 'axios', 
  echarts: 'echarts', 
  nprogress: 'NProgress', 
  'vue-quill-editor': 'VueQuillEditor'

配置完成后需要在public/index.html 文件的头部，添加CDN 资源引用

4、路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

/* 路由懒加载 */
/*路由被访问的时候才加载对应组件*/
{
   path: '/home',
   name: 'home',
   component: import('../page/home')
},{
   path:'/about',
   name:'about',
   component:import('../page/about')
},{

5、打包上线之后使用 gzip 可以减小文件体积，使传输速度更快。

  // 安装相应包   
  npm install compression -S   
  // 导入包   
  const compression = require('compression');   
  // 启用中件       
  app.use(compression());