Webpack性能優(yōu)化的方式有很多種,本文之所以將 dll 單獨(dú)講解,是因?yàn)?dll 是一種最簡(jiǎn)單粗暴并且極其有效的優(yōu)化方式。
在通常的打包過程中,你所引用的諸如:jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等眾多庫(kù)也會(huì)被打包進(jìn) bundle 文件中。由于這些庫(kù)的內(nèi)容基本不會(huì)發(fā)生改變,每次打包加入它們無(wú)疑是一種巨大的性能浪費(fèi)。
Dll 的技術(shù)就是在第一次時(shí)將所有引入的庫(kù)打包成一個(gè) dll.js 的文件,將自己編寫的內(nèi)容打包為 bundle.js 文件,這樣之后的打包只用處理 bundle 部分。
以一個(gè) Vue 項(xiàng)目為例,首先創(chuàng)建一個(gè)名為 webpack.dll.config.js 的文件
var path = require("path"), fs = require('fs'), webpack = require("w