Vue項目優化策略

項目優化策略

1. 生成打包報告

打包時，爲了直觀的發現項目中存在的問題，可以在打包時生成報告。生成報告的方式有兩種：

• 通過命令行參數的形式生成報告

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

• 通過可視化的UI面板直接查看報告（vue-cli3.0）

在可視化的UI面板中，通過控制檯和分析面板，可以方便的看到項目中所存在的問題。

2. 第三方庫啓用CDN

通過externals加載外部CDN資源：
默認情況下，通過import語法導入的第三方依賴包，最終會被打包合併到同一個文件中，從而導致打包成功後，單文件體積過大的問題。

爲了解決上述問題，可以通過webpack的externals節點，來配置並加載外部的CDN資源。凡是申明在externals中的第三方包，都不會被打包。

1. vue.config.js

   // 發佈模式下
   config.set('externals', {
       vue: 'Vue',
       'vue-router': 'VueRouter',
       axios: 'axios',
       lodash: '_',
       echarts: 'echarts'
   })
   

2. 同時，需要在public/index.html文件的頭部，添加如下的CDN資源引用，並且刪除main.js入口文件中Import引入的css文件：

   <link rel="stylesheet" href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.min.css">
   <link rel="stylesheet" href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.min.css">
   <link rel="stylesheet" href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css">
   

3. 同時，需要在public/index.html文件的頭部，添加如下的CDN資源引用js文件， 在main.js入口文件中不用刪除：

   <!-- js文件 -->
   <script src="https://cdn.bootcss.com/vue/2.6.11/vue.common.dev.js"></script>
   <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.js"></script>
   <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.min.js"></script>
   

3. Element-UI組件按需加載

雖然在開發階段，我們啓用了element-ui組件的按需加載，儘可能的減少了打包體積，但是那些被按需加載的組件，還是佔用了較大的文件體積。此時，我們可以將element ui中的組件，也通過cdn的形式加載，這樣能夠進一步減少打包後的文件體積。

具體操作如下流程：

1. 在main.js中，註釋掉element-ui按需加載的代碼

2. 在Index.html中的頭部區域中，通過CDN加載element-ui的Js和css樣式

   <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
   <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
   

4. 路由懶加載

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

1. 安裝@babel/plugin-syntax-dynamic-import包

2. 在babel.config.js配置文件中申明該插件

3. 將路由改爲按需加載的形式，示例代碼如下：

   const Foo = () => import (/* webpackChunkName: "group-foo" */ './Foo.vue')
   const Bar= () => import (/* webpackChunkName: "group-foo" */ './Bar.vue')
   const Baz= () => import (/* webpackChunkName: "group-boo" */ './Baz.vue')
   

5. 首頁內容定製

不同的打包環境下，首頁內容可能會有所不同。我們可以通過插件的方式進行定製，插件配置如下：