[[421852]]

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

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

1.1 構(gòu)建速度

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

1. 開啟

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

2.樣式文件

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

3.js文件

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

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

1.2 代碼調(diào)試

1.2.1 devServer

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

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

1.2.2 source map

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

因?yàn)閮?nèi)聯(lián)方式會(huì)讓代碼體積變大，所以在生產(chǎn)環(huán)境下不用內(nèi)聯(lián)方式。在生產(chǎn)環(huán)境條件下，需要考慮兩點(diǎ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

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

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

2.1.2 babel緩存

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

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

2.1.3 多進(jìn)程打包

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

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

2.1.4 externals

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

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

2.1.5 DLL

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

1.新建webpack.dll.js文件，用來進(jìn)行單獨(dú)打包生成動(dòng)態(tài)鏈接庫文件和mainfest.json,這樣在以后構(gòu)建的時(shí)候就不用重復(fù)打包了，可直接引用。(該文件中用到DllPlugin插件，用于生成mainfest.json文件，提供一個(gè)映射關(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: [ 
        // 打包生成一個(gè)mainfest.json，從而提供和對(duì)應(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，從而在主文件中引入打包好的動(dòng)態(tài)鏈接庫文件，從而讓主文件知道哪些文件不需要打包，打包庫里的名字是什么……

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

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

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

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

2.2.1 緩存

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

2.2.2 tree shaking

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

2.2.3 代碼分割

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

1.入口起點(diǎn)

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

2.防止重復(fù)

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

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

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

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

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

2.2.4 懶加載

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

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

2.2.5 預(yù)加載

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

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

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