项目仓库：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'
)