Vue項目打包優化（MD.10）

好久不見，最近很忙，大家依然可以關注漫島的最新動態。
今天要說的是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>

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