webpack的效能優化

摘要： webpack專案優化主要分為兩個方面的優化，生產環境的程式碼優化和開發環境的專案構建優化 生產環境的程式碼優化 第一、首屏載入速度 --- 由於spa應用（單頁應用）的特點，其首次載入白屏問題是不可避免的，我們只能通過一些方法減少白屏時間或者優化白屏時的使用者體驗 ...

webpack專案優化主要分為兩個方面的優化，生產環境的程式碼優化和開發環境的專案構建優化

生產環境的程式碼優化

• 第一、首屏載入速度 --- 由於spa應用（單頁應用）的特點，其首次載入白屏問題是不可避免的，我們只能通過一些方法減少白屏時間或者優化白屏時的使用者體驗
  1. 減少白屏時間
  • 將專案中的第三方安裝包通過CDN引入

    index.html

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>

    webpack的配置檔案

    config.externals = {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
    'lodash': '_'
    }

  • 提取提取公共依賴（new webpack.optimize.CommonsChunkPlugin("common.js")）
  • 配置html、css程式碼壓縮
  • 開啟gzip壓縮（需要伺服器也進行gzip的配置）
  • 優化白屏時的使用者體驗
    • 新增載入動畫 -- 在我們的專案入口檔案（index.html）中新增。

      <div id="app"><div class=loading></div></div>

    • 新增骨架屏（原理類似載入動畫，只是把動畫換成一個骨架屏）
      具體可以參考

      https://xiaoiver.github.io/coding/2017/07/30/%E4%B8%BAvue%E9%A1%B9%E7%9B%AE%E6%B7%BB%E5%8A%A0%E9%AA%A8%E6%9E%B6%E5%B1%8F.html

2. 專案打包之後vendor或者app.css檔案較大
   • 將我們不經常改變版本的第三方安裝包（vue、vue-router、vux、axios、loadsh等）通過cdn的方式引入
   • 將我們使用的第三方元件庫的css檔案也通過cdn引入
3. 程式碼分片實現路由懶載入
   • require.ensure([dependencies], callback,errorCalback,chunkName)

     path: 'home',
     getComponent: (nextState, cb) => {
     require.ensure([], require => {
     cb(null, require('./home'))
     })
     }

   • es6 的import()進行動態載入
   • Vue 的非同步元件和 Webpack 的程式碼分割功能

     const Foo = () => import('./Foo.vue')
     { path: '/foo', component: Foo }

4. 優化devtool減少檔案體積
   • 關閉生產環境的SourceMap（生產環境的SourceMap真心沒有什麼用處，如果糾結的話可以選擇開啟低級別的SourceMap）具體配置參考

   https://webpack.js.org/configuration/devtool/#root

開發環境的專案構建優化

1. Dllplugin提高專案構建速度
2. 熱替換

   devServer: {
   contentBase: path.resolve(__dirname, 'dist'),//需要監聽的檔案路徑
   host: '192.168.56.1',//伺服器地址
   compress: true,//開啟伺服器壓縮
   port: 3001 // 埠
   }

3. 配置合適的 delvtool

   
4. HappyPack 配置更多的電腦資源用於專案構建

   const HappyPack = require('happypack');
   exports.module = {
   rules: [
   {
   test: /.js$/,
   use: 'happypack/loader'
   }
   ]
   };
   exports.plugins = [
   new HappyPack({
   loaders: [ 'babel-loader?presets[]=es2015' ]
   })
   ];