webpack 效能提速

木子喵發表於2019-02-16
Web
  1. 按需引用 外部的元件按需引用

2.啟用happypack多核構建專案

3.修改source-map配置

  1. 啟用DllPlugin和DllReferencePlugin預編譯庫檔案

1、按需引用
1.1幾乎所有的第三方元件框架都會提供元件的按需引用方式，以iview為例，通過藉助外掛babel-plugin-import可以實現按需載入元件，減少檔案體積，只需要修改.babelrc檔案

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

1.2然後這樣按需引入元件，就可以減小體積了
import { Button } from `iview`
Vue.component(`Table`, Table)

2、啟用happypack多核構建專案
安裝happypack後，修改/build/webpack.base.conf.js檔案即可

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require(`happypack`)
const os = require(`os`)
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack外掛
plugins: [
    new HappyPack({
      id: `happy-babel-js`,
      loaders: [`babel-loader?cacheDirectory=true`],
      threadPool: happyThreadPool,
    })
  ]
// 修改引入loader
{
    test: /.js$/,
    // loader: `babel-loader`,
    loader: `happypack/loader?id=happy-babel-js`, // 增加新的HappyPack構建loader
    include: [resolve(`src`), resolve(`test`)]
}

實現js快取

webpack外掛CommonsChunkPlugin的主要作用是抽取webpack專案入口chunk的公共部分，具體的用法就不做過多介紹，不太瞭解可以參考webpack官網介紹；

該外掛是webpack專案常用的一個優化功能，幾乎在每個webpack專案中都會用到。使用該外掛帶來的好處：

提升webpack打包速度和專案體積：將webpack入口的chunk檔案中所有公共的程式碼提取出來，減少程式碼體積；同時提升webpack打包速度。

利用快取機制：依賴的公共模組檔案一般很少更改或者不會更改，這樣獨立模組檔案提取出可以長期快取。

但是在專案中，若外掛開啟方式不正確的話，上面的第二點其實是無法實現，因為這種情況下：

沒有被修改過的公有程式碼或庫程式碼打包出的Entry Chunk，會隨著其他業務程式碼的變化而變化，導致頁面上的長快取機制失效。

那麼，下面就來開啟CommonsChunkPlugin正確的開啟方式。

相關文章