Vue项目优化策略

1、生成打包报告

​ 打包后，更直观的发现项目中的问题

​ ①通过vue-cli的命令行生成报告

vue-cli-service build --report

​ ②使用vueui面板查看报告

​ build中运行项目即可查看

2、通过vue.config.js修改webpack的默认配置

由于vuecli3.0默认隐藏了所有webpack的配置项，可在根目录中自定义vue.config.js配置

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

默认模式下，Vue项目的开发模式和发布模式，共用一个打包的入口（main.js)

​ ①开发者模式入口文件：main-dev.js
​ ②发布模式的入口文件：main-prod.js

4、configureWebpack和chainWebpack

作用相同，都是修改webpack配置，前者通过链式编程来修改webpack配置，后者通过操作对象的形式来修改。

5、通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

6、路由懒加载

在打包构建项目时，JavaScript包会变得非常大，影响页面加载。把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。