[[421852]]

首先用一張利用MindMaster繪制思維導(dǎo)圖開篇來闡述本文的主要內(nèi)容，讀者可在此基礎(chǔ)上進(jìn)行擴(kuò)展自己的思維導(dǎo)圖。webpack除了基礎(chǔ)的配置外，還需要進(jìn)行優(yōu)化。對于開發(fā)環(huán)境主要優(yōu)化打包構(gòu)建速度和代碼調(diào)試;對于生產(chǎn)環(huán)境主要優(yōu)化打包的構(gòu)建速度和代碼運(yùn)行的性能。

一、開發(fā)環(huán)境

1.1 構(gòu)建速度

在開發(fā)環(huán)境中為了提升代碼構(gòu)建速度，可以利用HMR(模塊熱替換)來實現(xiàn)，通過該功能可以允許只變更更新內(nèi)容，而不需將所有內(nèi)容進(jìn)行構(gòu)建，極大提升構(gòu)建速度。

1. 開啟

module.exports = { 
    // ... 
    devServer: { 
        hot: true, 
    } 
} 

2.樣式文件

對于樣式文件，借助于style-loader即可實現(xiàn)模塊熱替換，這是因為此loader使用了module.hot.accept，在樣式改變后就可以熱更新到style標(biāo)簽中。

3.js文件

對于js文件默認(rèn)不能使用HMR功能，為了讓js文件支持該功能，可以借助于module.hot.accept這個接口，當(dāng)監(jiān)聽的模塊更新后，觸發(fā)一個回調(diào)函數(shù)對更新做出響應(yīng)。(注意：只能處理非入口js文件，因為入口js文件會引入其它文件，重新引入導(dǎo)致重新加載)。

// 判斷是否啟動熱更新 
if (module.hot) { 
  module.hot.accept('./js/add.js', () => { 
    console.log(add(1, 2)); 
  }); 
} 

1.2 代碼調(diào)試

1.2.1 devServer

devServer主要目的是實現(xiàn)自動化(自動編譯、自動打開瀏覽器、自動刷新瀏覽器……)。為了實現(xiàn)該功能，可以借助webpack-dev-server，通過其可以構(gòu)建一個小型的Web服務(wù)器，能夠?qū)崟r重新加載。(注意：利用webpack-dev-server啟動的項目只會在內(nèi)存中編譯打包，不會有任何輸出，這是因為訪問內(nèi)存中的代碼比訪問文件系統(tǒng)化中的文件更快)

module.exports = { 
    // ... 
    devServer: { 
        // 啟動gzip壓縮 
        compress: true, 
        port: 3000, 
        open: true, 
    } 
} 

1.2.2 source map

利用source map可以將編譯后的代碼映射回原始源代碼，從而更容易地追蹤error和warning。對于如何生成source map，利用devtool選項，其選項值可以是：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map，每個值具體含義可參照官網(wǎng)。

開發(fā)環(huán)境要求構(gòu)建速度快、調(diào)試更友好。構(gòu)建速度快，肯定采用內(nèi)聯(lián)方式(eval和inline);為了使調(diào)試更友好，則需要定位到代碼位置，可以使用source-map、cheap-module-source-map、cheap-source-map。綜上所述可以使用eval-source-map 或 eval-cheap-module-source-map。

因為內(nèi)聯(lián)方式會讓代碼體積變大，所以在生產(chǎn)環(huán)境下不用內(nèi)聯(lián)方式。在生產(chǎn)環(huán)境條件下，需要考慮兩點：源代碼是否需要隱藏、調(diào)試如何更友好。若隱藏代碼可以使用nosource-source-map和hidden-source-map;為了調(diào)試更友好，可采用source-map和cheap-module-source-map。

module.exports = { 
    // ... 
    devtool: 'eval-source-map' 
} 

二、生產(chǎn)環(huán)境

2.1 打包構(gòu)建速度

2.1.1 oneOf

每個文件對于rules中的所有規(guī)則都會遍歷一遍，如果使用oneOf就可以解決該問題，只要能匹配一個即可退出。(注意：在oneOf中不能兩個配置處理同一種類型文件)

module.exports = { 
    // ... 
    module: { 
        rules: [ 
            { 
                oneOf: [ 
                    // ... 
                ] 
            } 
        ] 
    } 
} 

2.1.2 babel緩存

Babel在轉(zhuǎn)義js文件過程中消耗性能較高，將babel-loader執(zhí)行的結(jié)果緩存起來，當(dāng)重新打包構(gòu)建時會嘗試讀取緩存，從而提高打包構(gòu)建速度、降低消耗。

module.exports = { 
    // ... 
    module: { 
        rules: [ 
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader', 
                options: { 
                    // ... 
                    // 開啟babel緩存。第二次構(gòu)建時，會讀取之前的緩存 
                    cacheDirectory: true 
                } 
            } 
        ] 
    } 
} 

2.1.3 多進(jìn)程打包

webpack構(gòu)建過程中需要大量文件進(jìn)行解析和處理，所以構(gòu)建時文件讀寫和計算密集型的操作，而運(yùn)行在Node.js之上的Webpack是單線程模型，所以構(gòu)建起來速度會比較慢，此時為了提升構(gòu)建速度，可以選擇發(fā)揮多核CPU電腦的功能，利用多進(jìn)程來提升構(gòu)建速度。可以利用thread-loader來進(jìn)行多進(jìn)程打包，將該loader放置在其他loader之前， 放置在這個 loader 之后的 loader 就會在一個單獨的 worker 池(worker pool)中運(yùn)行(注意：每個 worker 都是一個單獨的有 600ms 限制的 node.js 進(jìn)程，只有工作消耗時間比較長才需要多進(jìn)程打包)。

module.exports = { 
    // ... 
    module: { 
        rules: [ 
            { 
                // ... 
                use: [ 
                    { 
                        loader: 'thread-loader', 
                        options: { 
                            workers: 2 //兩個進(jìn)程 
                        } 
                    }, 
                    // ... 
                ] 
            } 
        ] 
    } 
} 

2.1.4 externals

externals告訴在Webpack要構(gòu)建的代碼中使用了哪些不用被打包的模塊，也就是說在運(yùn)行時再去從外部獲取這些擴(kuò)展依賴，這樣就會減少打包的內(nèi)容，從而減少打包時間并減小包的體積。例如直接通過script標(biāo)簽從CDN中引入jQuery，而不是將它打包。

module.exports = { 
    externals: { 
        // 拒絕jQuery被打包進(jìn)來 
        jquery: 'jQuery' 
    } 
} 

2.1.5 DLL

DLL即動態(tài)鏈接庫，使用該技術(shù)能夠?qū)δ承?react、vue、jquery……)進(jìn)行單獨打包，通過單獨打包后，后續(xù)可直接引用，不需要再次進(jìn)行打包(只需要打包一次)，極大提升構(gòu)建速度。在這個過程中主要涉及到三個步驟：

1.新建webpack.dll.js文件，用來進(jìn)行單獨打包生成動態(tài)鏈接庫文件和mainfest.json,這樣在以后構(gòu)建的時候就不用重復(fù)打包了，可直接引用。(該文件中用到DllPlugin插件，用于生成mainfest.json文件，提供一個映射關(guān)系)

const path = require('path'); 
const webpack = require('webpack'); 
 
module.exports = { 
    entry: { 
        jquery: ['jquery'] 
    }, 
    output: { 
        filename: '[name].js', 
        path: path.resolve(__dirname, 'dll'), 
        library: '[name]_[hash]'// 打包的庫里面向外暴露出去的內(nèi)容叫什么名字 
    }, 
    plugins: [ 
        // 打包生成一個mainfest.json，從而提供和對應(yīng)包的映射 
        new webpack.DllPlugin({ 
            name: '[name]_[hash]',// 映射庫的暴露的內(nèi)容名稱 
            path: path.resolve(__dirname, 'dll/mainfest.json'),// 輸出文件路徑 
        }) 
    ], 
    mode: 'production' 
}; 

2.在webpack.config.js文件中配置webpack.DllReferencePlugin，從而在主文件中引入打包好的動態(tài)鏈接庫文件，從而讓主文件知道哪些文件不需要打包，打包庫里的名字是什么……

module.exports = { 
    // ... 
    plugins: [ 
        new webpack.DllReferencePlugin({ 
            manifest: resolve(__dirname, 'dll/mainfest.json') 
        }), 
    ] 
} 

3.由于動態(tài)鏈接庫文件并沒有被引入進(jìn)html文件中，利用add-asset-html-webpack-plugin插件即可將該鏈接庫文件在html中自動引入。

module.exports = { 
    // ... 
    plugins: [ 
        new AddAssetHtmlWebpackPlugin({ 
            filepath: resolve(__dirname, 'dll/jquery.js') 
        }) 
    ] 
} 

2.2 代碼運(yùn)行性能

2.2.1 緩存

獲取資源是比較耗費時間的，利用緩存可以降低網(wǎng)絡(luò)流量，使網(wǎng)站加載速度更快。由于強(qiáng)緩存會存在內(nèi)容不能及時更新的問題，為了解決該問題，則需要為webpack配置的文件名加上hash值。對于webpack中hash值主要有三種：hash、chunkhash、contenthash。由于緩存希望一個文件改動只會影響該文件的緩存，其余文件緩存不失效，所以該hash值應(yīng)該選擇根據(jù)文件內(nèi)容生成的hash值contenthash，即文件命名中添加contenthash。

2.2.2 tree shaking

通常用于描述移除 JavaScript上下文中的未引用代碼(dead-code),讓代碼體積變的更小。為了實現(xiàn)該功能，需要兩個前提條件：一是必須使用ES6模塊，二是開啟production環(huán)境。(注意：為了放置將可能有副作用的文件(例如：css文件)刪除掉，則需要將其添加到package.json文件中的sideEffects的配置中(例如："sideEffects":["*.css"]))。

2.2.3 代碼分割

代碼分割就是把打包輸出的代碼分離到不同的bundle中，然后可以按需加載或并行加載這些文件。常用的方法主要有三種：入口起點、防止重復(fù)、動態(tài)導(dǎo)入。

1.入口起點

利用單入口和多入口(對象形式)的方式進(jìn)行拆分，有一個入口就會輸出一個bundle。對于這種方式存在重復(fù)引用的弊端，為了解決該問題需要利用SplitChunksPlugin插件，即下面的防止重復(fù)的方法。

2.防止重復(fù)

利用SplitChunksPlugin可以進(jìn)行公共代碼提取，提取主要包括兩類：一類是可以將來自node_modules文件夾下的模塊單獨打包為一個chunk輸出;另一類是對于多入口，會自動分析多入口chunk中公共文件(該文件大于30kb才會單獨打包)并單獨打包為一個chunk。

module.exports = { 
    // ... 
    optimization: { 
        splitChunks: { 
            chunks: 'all' 
        } 
    } 
} 

3.動態(tài)導(dǎo)入

利用import()語法能夠?qū)崿F(xiàn)動態(tài)導(dǎo)入，從而將某個文件單獨打包。

import(/* webpackChunkName: 'add' */'./js/add') 
    .then(({ add }) => { 
        console.log(add(1, 2)); 
    }) 
    .catch(() => {}) 

2.2.4 懶加載

懶加載是一種很好的優(yōu)化方式，當(dāng)代碼被需要時才會進(jìn)行下載，這樣就加快了應(yīng)用的初始加載速度并減輕了代碼的總體體積(因為有些代碼永遠(yuǎn)不會被加載)。實現(xiàn)方式就是在異步代碼中使用import()語法引入文件，這樣就起到懶加載的作用。

document.getElementById('btn').addEventListener('click', () => { 
    import(/*webpackChunkName: 'test'*/./test) 
        .then(() => {}) 
        .catch(() => {}) 
}) 

2.2.5 預(yù)加載

預(yù)加載主要用于加載未來可能使用的文件，利用預(yù)加載可以在使用之前提前加載文件。對于預(yù)加載，其實是在父chunk完成加載后瀏覽器空閑了再加載資源。通過在import()語法中添加webpackPrefetch：true來實現(xiàn)預(yù)加載。

import(/*webpackChunkName: 'test',webpackPrefetch: true*/./test) 
        .then(() => {}) 
        .catch(() => {}) 

本文轉(zhuǎn)載自微信公眾號「前端點線面」，作者前端點線面。轉(zhuǎn)載本文請聯(lián)系前端點線面公眾號。