webpack打包性能優化之路

性能優化的路沒有窮盡，只有更快。打開頁面越快越好，點擊響應越快越好。在當今這個以快爲主的時代，快纔是王道。閒話扯完，說正事！！！

該優化方案以最近作的一個hybrid webapp爲實例演示。

路由懶加載

（1）vue-router文件中的router使用懶加載方式。以下圖所示

（2）在vue文件中，也採用相似方式引入其餘vue組件

const showImage = () => import('@/components/common/showImage');
複製代碼

這個優化的方式在vue官網也有介紹，傳送門

啓用gzip壓縮和關閉sourcemap

全部現代瀏覽器都支持 gzip 壓縮並會爲全部 HTTP 請求自動協商此類壓縮。啓用 gzip 壓縮可大幅縮減所傳輸的響應的大小（最多可縮減90%），從而顯著縮短下載相應資源所需的時間、減小客戶端的流量消耗並加快網頁的首次呈現速度。 以下圖所示

若是你使用的是vue-cli2生成的項目的話，在config文件夾下的index.js中能夠找到這段代碼。記得開啓gzip壓縮前要安裝一個插件，如途中註釋掉的一段代碼所示。

生產環境去掉console代碼，減小代碼體積，使用uglifyjs壓縮代碼

圖片優化

對於網頁來講，在所下載的字節數中，圖片每每會佔很大比例。所以，優化圖片一般能夠卓有成效地減小字節數和改進性能：瀏覽器須要下載的字節數越少，對客戶端帶寬的爭用就越少，瀏覽器下載內容並在屏幕上呈現內容的速度就越快。
儘可能減小圖片的使用，或者使用css3來代替圖片效果。若是不行的話，小圖片經過必定的工具合成雪碧圖或者轉成base64。

引用的庫儘可能按需加載。

(1)像通常的ui庫element，vant等庫都提供來按需加載的方式，避免所有引入，加大項目體積。 (2)以cdn方式載入須要的庫，也能夠減小打包後的體積。 在index.html文件中

引入mintui

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
複製代碼

引入vue

<!-- 開發環境使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- 生產環境使用此方案 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
複製代碼

以這種外鏈方式引入mint-ui和vue後，須要作些別的配置
（1）在入口文件main.js 中就不須要引入vue和mintui了
（2）在build\webpack.base.conf.js中添加以下配置，意爲打包的時候不打包vue和mint-ui。

externals:{
  "mint-ui":"mintui",
  "vue":"Vue"
},
複製代碼

使用DllReferencePlugin

將平時不常常變更的文件抽離出來，統一打包，這樣也能夠減小後續打包的時間。

• 在build文件夾中新建一個webpack.dll.conf.js.

const path = require('path')
const webpack = require('webpack')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    vendor: [
        //根據實際狀況添加
      'axios',
      'vue/dist/vue.min.js',
      'vue-router',
      'vuex',
      'mint-ui'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!(autotrack|dom-utils))/
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false // set to true if you want JS source maps
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    /*
      @desc: https://webpack.js.org/plugins/module-concatenation-plugin/
      "做用域提高(scope hoisting)",使代碼體積更小[函數申明會產生大量代碼](#webpack3)
    */
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
}

複製代碼

• 在package.json中增長配置

"scripts": {
    "build:dll": "webpack -p --progress --config build/webpack.dll.conf.js"
  }
複製代碼

執行npm run build:dll命令就能夠在根目錄下生成vendor-manifest.json,static/js下生成vendor.dll.js

• 在webpack.base.conf.js中增長以下

const manifest = require('../vendor-manifest.json')

....

plugins: [
   //把dll的vendor-manifest.json引用到須要的預編譯的依賴
   new webpack.DllReferencePlugin({
     manifest
   })
]
複製代碼

• 在index.html底部添加

<script src="./static/js/vendor.dll.js"></script>
複製代碼

目前在項目中作的優化就是這些，仍是那句話，性能優化的路沒有窮盡，只有更快。

參考文章

（1）blog.csdn.net/blueberry_l…
（2）developers.google.com/speed/docs/…
（3）www.jeffjade.com/2017/03/11/…