电商后台管理系统

电商后台管理系统
一.项目优化策略
生成打包报告
第三方库启用 CDN
Element-UI 组件按需加载
路由懒加载
首页内容定制

1、生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：

① 通过命令行参数的形式生成报告

// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report

② 通过可视化的UI面板直接查看报告（推荐）

1.在项目中进入cmd 输入vue ui
在这里插入图片描述

2.通过 vue.config.js 修改 webpack 的默认配置
通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js）。

 // vue.config.js 
 // 这个文件中，应该导出一个包含了自定义配置选项的对象
 module.exports = {
   
 // 选项...
 }

3. 为开发模式与发布模式指定不同的打包入口
   默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
   ① 开发模式的入口文件为 src/main-dev.js
   ② 发布模式的入口文件为 src/main-prod.js

4. configureWebpack 和 chainWebpac

https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

5. 通过 chainWebpack 自定义打包入口

module.exports = {
   
 chainWebpack: config => {
   
 config.when(process.env.NODE_ENV === 'production', config => {
   
 config.entry('app').clear