減少Webpack打包時(shí)間
1.優(yōu)化Loader
對于Loader裆站，影響打包效率的是它的屬性Babel.Babel會(huì)將代碼轉(zhuǎn)為字符串 生成AST腌紧，然后對AST繼續(xù)進(jìn)行轉(zhuǎn)變最后生成新的代碼蝇裤，項(xiàng)目越大徒探，轉(zhuǎn)換代碼越多腊凶，效率就越低编矾。
優(yōu)化Loader的文件搜索范圍
module.exports = {
module:{
rules:[
{
//js文件才使用babel
test:/\.js$/,
loader:'babel-loader',
//只在src文件夾下查找
include:[resolve('src')]，
//不會(huì)去查找的路徑
exclude:/node_modules/
}
]
}
}
把Babel編譯過的文件緩存起來
下次只需要編譯更改過的代碼文件即可
loader: 'babel-loader?cacheDirectory=ture'
HappyPack
因?yàn)镹ode是單線程運(yùn)行的箱熬，所以Webpack在打包的過程中也是單線程的类垦，特別是在執(zhí)行Loader的時(shí)候，這樣會(huì)導(dǎo)致等待的情況
HappyPack可以將Loader的同步執(zhí)行轉(zhuǎn)換為并行的
module:{
loader:[
{
//js文件才使用babel
test:/\.js$/,
//只在src文件夾下查找
include:[resolve('src')]城须，
exclude:/node_modules/,
//id后面的內(nèi)容對應(yīng)下面
loader:'happypack/loader?id=happypack'
}
]
},
plugins:[
new HappyPack({
id:'happypack',
loaders:['babel-loader?cacheDirectory'],
//開啟4個(gè)線程
threads:4
})
]
DllPlugin
DllPlugin可以將特定的類庫提前打包然后引入蚤认。這種方式可以極大的減少打包類庫的次數(shù)，只有當(dāng)類庫更新版本才有需要重新打包糕伐，并且也實(shí)現(xiàn)了將公共代碼抽離成單獨(dú)文件的優(yōu)化方案
//單獨(dú)配置在一個(gè)文件里
//webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry:{
//想統(tǒng)一打包的庫
vendor:['react']
},
output:{
path:path.join(__dirname,'dist'),
filename:'[name].dll.js',
library:'[name]-[hash]'
},
plugins:[
new webpack.DllPlugin({
//name必須和output.library一致
name:'[name]-[hash]',
//該屬性需要與DllReferencePlugin中一致
context:__dirname,
path:path.join(__dirname,'dist','[name]-mainfest.json')
})
]
}
然后需要執(zhí)行這個(gè)配置文件生成依賴文件砰琢，接下來需要使用DllReferencePluhin將依賴文件引入項(xiàng)目中
//webpack.conf.js
module.exports={
//...省略其他配置
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
mainfest:require('./dist/vendor-mainfest.json')
})
]
}
減少Webpack打包后的文件體積
按需加載
如果我們把十幾個(gè)頁面甚至更多的路由頁面，把這些頁面全部打包進(jìn)一個(gè)JS文件的話良瞧，雖然將多個(gè)請求合并了陪汽，但是同樣也加載了很多并不需要的代碼，耗費(fèi)了更長的時(shí)間褥蚯。那么為了首頁能更快地呈現(xiàn)給客戶挚冤，這時(shí)候我們就可以使用按需加載，將每個(gè)路由頁面單獨(dú)打包為一個(gè)文件赞庶，當(dāng)然不僅路由可以按需加載训挡，對于loadash這種大型類庫可以使用這個(gè)功能。
當(dāng)使用的時(shí)候再去下載對應(yīng)文件歧强，返回一個(gè)Promise當(dāng)Promise成功以后去執(zhí)行回調(diào)
Scope Hoisting
Scope Hoisting會(huì)分析出模塊之間的依賴關(guān)系澜薄，盡可能的把打包出來的模塊合并到一個(gè)函數(shù)中去。
比如我們希望打包兩個(gè)模塊
//test.js
export const a=1
//index.js
import {a} from './test.js'
對于這種情況摊册，我們打包出來的代碼類似這樣
[
function (module,exports,require){
//...
},
function(module,exports,require){
//...
}
]
但是如果我們使用Scope Hoisting的話表悬，代碼就會(huì)盡可能的合并到一個(gè)函數(shù)去，也就變成了這樣的類似代碼
[
function(module,exports,require){
//...
}
]
這樣的打包方式生成的代碼明顯比之前的少了多了丧靡。如果在webpack4中希望開啟這個(gè)功能蟆沫，只需要啟用
optimization.concatenateModules就可以了
module,exports={
optimization:{
concatenateModules:true
}
}
Tree Shaking
Tree Shaking 可以實(shí)現(xiàn)刪除項(xiàng)目中未被引用的代碼
//test.js
export const a = 1;
export const b = 2;
//index.js
import {a} from './test.js'
test文件中的變量b如果沒有在項(xiàng)目中使用到的話，就不會(huì)被打包到文件中温治。
webpack4的話饭庞，開啟生產(chǎn)環(huán)境就會(huì)自動(dòng)啟動(dòng)這個(gè)優(yōu)化功能。
