好久不見，最近很忙，大家依然可以關注漫島的最新動態。
今天要說的是Vue專案的一些打包技巧，都是我在漫島使用過的，因為我們沒錢買高配置伺服器（目前還是個測試伺服器），所以就只能把優化做到更優了。
隨著專案開發，上線包體積的增大，尤其是我們的vendor.js,這會讓專案首屏載入緩慢，白屏好一陣子，這顯然是很loser的。於是我便進行了以下幾步操作，成功的優化了vendor.js的體積，以前1m多的現在只有200來k。直接說我具體用了哪些手段吧！

1.路由懶載入
vue-router為我們提供了路由懶載入功能，非常省心，使用也簡單。在router.js裡面，原來這麼寫的

//原來這麼引入的模組的
import UserHome from  '@/views/user/UserHome.vue';
import ImageWorks from '@/views/user/user-works/ImageWorks.vue'
//現在是按需引入
const UserHome = () =>
	import( /* webpackChunkName: "group-userhome" */ '@/views/user/UserHome.vue');
const ImageWorks = () =>
	import( /* webpackChunkName: "group-userhome" */ '@/views/user/user-works/ImageWorks.vue');

const VideoWorks = () =>
	import('@/views/user/user-works/VideoWorks.vue');
 

具體參考vue-router文件，真的太簡單了。路由懶載入之後我們只需要在首次請求時載入首頁或者必要的js就行了，其他部分被單獨打包成新的.js檔案，頁面載入時自動引入。這樣就大大削減了一部分vendor.js的體積了！

2.打包時開啟gzip壓縮
config資料夾中的index.js

開啟了gzip壓縮開關後，需要安裝compression-webpack-plugin外掛，如果打包時報錯TypeError: Cannot read property 'emit' of undefined，不要慌，把你的compression-webpack-plugin降級到1.1.12就行了。

//在build資料夾下的webpack.prod.config.js裡配置
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      //filename: '[path].gz[query]',//優化載入--註釋掉原來這行
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}
 

3.削減打包的庫
這種方法我沒用，只是簡單測試了一下,因為暫時還不需要，經過上面兩步優化，現在上線包的vendor.js體積在預期範圍內。
首先在配置檔案申明不需要打包的庫：

取而代之的是在你的入口檔案index.html引入你放在CDN上的函式庫，比如說你用的了element.ui框架，直接在index.html裡面寫。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

這種方法可能會帶來一些麻煩，比如報錯找不到依賴什麼的，可能有解決辦法或者是我用錯了，但是我沒有繼續研究，因為還有更多的東西要去研究，等到真需要的時候再來吧！