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