7、项目优化及上线

项目仓库：https://github.com/changeclass/vue-shop

优化策略

1. 生成打包报告
2. 第三方库使用cdn
3. ElementUI使用按需加载
4. 路由懒加载
5. 首页内容定制

添加进度条

1. 安装nprogress依赖

2. 导入包

   import NProgress from 'nprogress'
   import 'nprogress/nprogress.css'

3. 为请求添加进度条效果

   // request拦截器(展示进度条)
   axios.interceptors.request.use(config => {
       NProgress.start()
       config.headers.Authorization = window.sessionStorage.getItem('token')
       return config
   })
   // 相应拦截器 （隐藏进度条）
   axios.interceptors.response.use(config => {
       NProgress.done()
       return config
   })

   为axios设置拦截器，当发送request时显示进度条，响应数据时取消进度条

打包时去掉console

1. 安装开发依赖babel-plugin-transform-remove-console

2. 配置babel

   // 项目发布阶段
   const prodPlugins = []
   if (process.env.NODE_ENV === 'production') {
     prodPlugins.push('transform-remove-console')
   }
   module.exports = {
     presets: ['@vue/cli-plugin-babel/preset'],
     plugins: [
       [
         'component',
         {
           libraryName: 'element-ui',
           styleLibraryName: 'theme-chalk'
         }
       ],
       ...prodPlugins
     ]
   }

修改webpack默认配置

在项目目录创建vue.config.js中创建配置文件用于自定义webpack的配置

修改入口文件

// 指向不同入口文件
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')
    })
}

加载外部CDN资源

1. 在发布模式下使用

   // 发布模式
   config.when(process.env.NODE_ENV === 'production', config => {
       config
           .entry('app')
           .clear()
           .add('./src/main-prod.js')
   
       config.set('externals', {
           vue: 'Vue',
           'vue-router': 'VueRouter',
           axios: 'axios',
           lodash: '_',
           echarts: 'echarts',
           nprogress: 'NProgress',
           'vue-quill-editor': 'VueQuillEditor'
       })
   })

2. 在public/index.html文件中引入CDN资源

   <!-- nprogress 的样式表文件 -->
   <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
   <!-- 富文本编辑器 的样式表文件 -->
   <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
   <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
   <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
   
   <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
   <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
   <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
   <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
   <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
   <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
   <!-- 富文本编辑器的 js 文件 -->
   <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

ElementUI

1. 在生产模式下的入口文件中注释掉ElementUI按需加载的代码

2. 在public/index.html文件中引入CDN资源

   <!-- element-ui 的样式表文件 -->
   <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
   
   <!-- element-ui 的 js 文件 -->
   <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

首页内容自定制

module.exports = {
  // 指向不同入口文件
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      // 引入外部CDN资源
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      // 首页自定制
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
    // 首页自定制
    config.plugin('html').tap(args => {
      args[0].isProd = false
      return args
    })
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

  <% if(htmlWebpackPlugin.options.isProd){ %>


  <% } %>
</head>

</html>

路由懒加载

1. 安装开发依赖@babel/plugin-syntax-dynamic-import

2. 在babel.config.js中使用这个插件

   module.exports = {
     presets: ['@vue/cli-plugin-babel/preset'],
     plugins: [
       '@babel/plugin-syntax-dynamic-import'
     ]
   }

3. 将路由导入方式改为懒加载模式

   const Login = () =>
   import(/* webpackChunkName:"login_home_welcome" */ '../components/Login.vue')
   const Home = () =>
   import(/* webpackChunkName:"login_home_welcome" */ '../components/Home.vue')
   const Welcome = () =>
   import(
       /* webpackChunkName:"login_home_welcome" */ '../components/Welcome.vue'
   )
   const User = () =>
   import(
       /* webpackChunkName:"User_Rights_Roles" */ '../components/user/User.vue'
   )
   const Rights = () =>
   import(
       /* webpackChunkName:"User_Rights_Roles" */ '../components/power/Rights.vue'
   )
   const Roles = () =>
   import(
       /* webpackChunkName:"User_Rights_Roles" */ '../components/power/Roles.vue'
   )
   const Cate = () =>
   import(/* webpackChunkName:"Cate_Params" */ '../components/goods/Cate.vue')
   const Params = () =>
   import(/* webpackChunkName:"Cate_Params" */ '../components/goods/Params.vue')
   
   const GoodList = () =>
   import(/* webpackChunkName:"GoodList_Add" */ '../components/goods/List.vue')
   const Add = () =>
   import(/* webpackChunkName:"GoodList_Add" */ '../components/goods/Add.vue')
   const Order = () =>
   import(/* webpackChunkName:"Order_Report" */ '../components/order/order.vue')
   const Report = () =>
   import(
       /* webpackChunkName:"Order_Report" */ '../components/report/Report.vue'
   )