电商后台管理系统项目的优化

最新推荐文章于 2023-09-06 14:51:38 发布

Letimer

最新推荐文章于 2023-09-06 14:51:38 发布

阅读量2.8k

点赞数

分类专栏：笔记文章标签：面试 vue

本文链接：https://blog.csdn.net/qq_53273706/article/details/119307076

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在面试过程中，面试官除了对基础知识的盘查之外，还会了解你所做的项目，单单知识谈项目所用到的技术已经满足不了面试官对我们的好奇心了，每次面试问到优化这一方面，因为没怎么准备，含糊的说辞只会让面试官连连摇头，因此，我特意把所做的项目之一——电商后台管理系统的优化扒拉出来进行一番梳理，冲呀！（对了，我是个大三的小菜鸡，这个优化属于比较基础的优化）

概要：这个项目属于前后端分离，前端所用的技术栈为axios+vue+echarts+element ui.

优化方向

对较大包的打包优化（基于cdn）
对element ui的优化
自定义标题内容
路由懒加载

优化一：对较大包的优化，使用externals节点

步骤1：创建配置文件等准备工作

（1）终端输入vue ui打开可视化界面或者使用vue-cli-service build --report对资源大小占比进行分析

（2）创建vue.config.js文件，在该文件中修改webpack默认配置，详细参考如下链接：https：//cli.vuejs.org/zh/config/#vue-config-js

（3）使用chainWebpack自定义打包入口（将开发和发布的入口分离开，方便各自配置）

//基本格式，应该导出一个包含自定义配置选项的对象
module.exports = {
    // 通过chainWebpack自定义打包入口
    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')
        })
  }

步骤2：通过externals加载外部CND资源

(1)对配置进行设置，将不需要打包的依赖放置在externals中

//基本格式，应该导出一个包含自定义配置选项的对象
module.exports = {
    // 通过chainWebpack自定义打包入口
    chainWebpack: config => {
        //发布模式
        config.when(process.env.NODE_ENV === 'production' ,config => {
            config.entry('app')
            .clear()
            .add('./src/main-prod.js')
        //设置externals需要加载的文件
        config.set('externals',{
            vue:'Vue',
            // 'vue-router':VueRouter,
            axios:'axios',
            lodash:'_',
            echarts:'echarts',
            nprogress:'NProgress'
        })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development' ,config => {
            config
            .entry('app')
            .clear()
            .add('./src/main-dev.js')
        })
  }

（2）在dist文件夹下的index.html头文件中加载相应的cdn


  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd?'':'dev-' %>电商后台管理系统</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.21.1/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>

  </head>