电商后台管理系统项目的优化_电商系统优化的点
赞
踩
在面试过程中，面试官除了对基础知识的盘查之外，还会了解你所做的项目，单单知识谈项目所用到的技术已经满足不了面试官对我们的好奇心了，每次面试问到优化这一方面，因为没怎么准备，含糊的说辞只会让面试官连连摇头，因此，我特意把所做的项目之一——电商后台管理系统的优化扒拉出来进行一番梳理，冲呀！（对了，我是个大三的小菜鸡，这个优化属于比较基础的优化）
概要：这个项目属于前后端分离，前端所用的技术栈为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>
-
-
优化二：对element-ui的优化
步骤1：在入口文件中将用import导入的element-ui注释掉
步骤2：在public/index.html文件中引入element-ui的cdn的Js和css
优化三：自定义标题内容
不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定制，插件配置如下：
步骤1：在配置文件中设置isProd的值，从而在Index.html中判断isProd的值进行取值
步骤2：在Index.html中判断isProd的值进行取值
优化四：路由懒加载
在打包构建过程中，js包会变得非常大，影响页面加载，如果我们将不同路由对应的组件分割成不同的代码块，只有在路由被访问时才被加载，那么可以提高效率
步骤1：安装@babel/pugin-syntax-dynamic-import包
步骤2：在babel.config.js文件中声明该插件
"plugins": ["@babel/plugin-syntax-dynamic-import"] :
步骤3：将路由改成按需加载的形式
const home=()=>import(/*webpackChunkName:”group-foo”*/,'./component/home.vue')
小结：上面的优化是跟视频学来的，优化是一个很大而且对于我们前端来说不可缺少的内容，对于优化作为前端的我们来说应该有一个概念体系，明白从哪一方面可以优化，这样才能在面试时让面试官知道我们对优化是花了时间和做出实践的，已经八月了，同学们要冲起来哦！！
