如何優化webpack

一、Webpack性能優化
          1、可以減少webpack打包時間
                    2、可以減少webpack打出來包體積
            優化loader 對於 Loader 來說，影響打包效率首當其衝必屬 Babel 了。因爲 Babel

會將代碼轉爲字符串生成 AST ，然後對 AST 繼續進行轉變最後再生成新的
代碼，項目越大，轉換代碼越多，效率就越低。當然了，我們是有辦法優化的
優化 Loader 的文件搜索範圍

        module.exports = {

module: {
rules: [
{
// js 文件才使用 babel
test: /.js$/,
loader: 'babel-loader',
// 只在 src 文件夾下查找
include: [resolve('src')],
// 不會去查找的路徑
exclude: /node_modules/
}
]
}

當然這樣做還不夠，我們還可以將 Babel 編譯過的文件緩存起來，下次只需要編譯更改
過的代碼文件即可，這樣可以大幅度加快打包時間
二 、HappyPack
由於受限於 Node 是單線程運行的，所以 Webpack 在打包的過程中也是單線程
的，特別是在執行 Loader 的時候，長時間編譯的任務很多，這樣就會導致等
待的情況。HappyPack 可以將 Loader 的同步執行轉換爲並行的，這樣就能充分利用系
統資源來加快打包效率了
如
module: {
loaders: [
{
test: /.js$/,
include: [resolve('src')],
exclude: /node_modules/,
// id 後面的內容對應下面
loader: 'happypack/loader?id=happybabel'
}
] },
plugins: [
new HappyPack({
id: 'happybabel',
loaders: ['babel-loader?cacheDirectory'],
// 開啓 4 個線程
threads: 4
})
]
等