[TOC] # 1.1项目优化策略 ## 1.生成打包报告 打包时，为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ①通过命令行参数的形式生成报告 ~~~ //通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-service build --report ~~~ ②通过可视化的U面板直接查看报告(**推荐**) 在可视化的Ul面板中，通过**控制台**和**分析**面板，可以方便地看到项目中所存在的问题。 任务>>运行>>控制面板 查看 ## 2.通过vue.config.js修改webpack的默认配置 通过vue-cli 3.0工具生成的项目，**默认隐藏了所有webpack的配置项**，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。 如果程序员有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件,从而对项目的打包发布过程做自定义的配置(具体配置参考[https://cli.vuejs.org/zh/config/#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和chainWebpack 在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。 在这里，configureWebpack 和chainWebpack的作用相同，唯一-的区别就是它们修改webpack配置的方式不同: ① chainWebpack 通过**链式编程的形式**，来修改默认的webpack配置 ② configureWebpack 通过**操作对象的形式**，来修改默认的webpack配置 两者具体的使用差异，可参考如下网址: [https://cli.vuejs.org/zh/guide/webpack.html#webpack-相关](https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3) ## 5.通过chainWebpack自定义打包入口 代码示例如下: 创建的 vue.config.js 文件下书写 ~~~ module.exports = { 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 => { configentry('app').clear() .add('./src/main-dev.js') }) } } ~~~