黑马电商后台管理项目项目优化与上线

1.项目优化与上线

1.1项目优化策略

1.生成打包报告

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

①通过命令行参数的形式生成报告(不推荐)

//通过vue-cli的命令选项可以生成打包报告

//–report选项可以生成report.html以帮助分析包内容

vue-cli-service bulid --report

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

在可视化的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

②// vue.config.js

//这个文件中,应该导出一个包含了自定义配置选项的对象

module.exports = {

// 选项…

}

3.为开发模式与发布模式指定不同的打包入口

默认情况下，vue项目的开发模式与发布模式，功用同一个打包的入口文件（即src/main.js）。为了将项目的开发模式与发布过程分离，

我们可以为两种模式，各自指定打包的入口文件

①开发模式的入口文件为src/main-dev.js

②发布模式的入口文件为src/main-prod.js

4.configureWebpack和chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，用来定义webpack的打包配置

在这里：configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同：

①chainWebpack通过链式编程的形式，来修改默认的webpack配置

②chainWebpack通过操作对象的形式，来修改默认的webpack配置

5.通过chainWebpack自定义