vue-cli4 項目打包優化

1.通過命令行參數的形式生成報告：

// 通過vue-cli 的命令選項可以生成打包報告
// --report 選項可以生成report.html 以幫助分析包的內容
vue-cli-service build --report

2.路由懶加載
當打包構建項目時，JavaScript包會變得非常大，影響頁面加載，如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
方法：

• 安裝 @babel/plugin-syntax-dynamic-import 包
• 在 babel.config.js 配置文件中聲明該插件
• 將路由改為按需加載的形式，代碼如下：

// 只有安裝了插件才能用如下語法
const Foo = ()=> import(/* webpackChunkName:"group-foo" */ './Foo.vue')
const Bar = ()=> import(/* webpackChunkName:"group-foo" */ './Bar.vue')
const Boo = ()=> import(/* webpackChunkName:"group-boo" */ './Baz.vue')

關於懶加載更詳細的文檔可參考：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html