webpack 性能提速

1. 按需引用 外部的組件按需引用

2.啓用happypack多核構建項目

3.修改source-map配置

1. 啓用DllPlugin和DllReferencePlugin預編譯庫文件

一、按需引用
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)

二、啓用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正確的打開方式。