圖解Webpack之優(yōu)化篇
首先用一張利用MindMaster繪制思維導(dǎo)圖開(kāi)篇來(lái)闡述本文的主要內(nèi)容，讀者可在此基礎(chǔ)上進(jìn)行擴(kuò)展自己的思維導(dǎo)圖。webpack除了基礎(chǔ)的配置外，還需要進(jìn)行優(yōu)化。對(duì)于開(kāi)發(fā)環(huán)境主要優(yōu)化打包構(gòu)建速度和代碼調(diào)試;對(duì)于生產(chǎn)環(huán)境主要優(yōu)化打包的構(gòu)建速度和代碼運(yùn)行的性能。
一、開(kāi)發(fā)環(huán)境
1.1 構(gòu)建速度
在開(kāi)發(fā)環(huán)境中為了提升代碼構(gòu)建速度，可以利用HMR(模塊熱替換)來(lái)實(shí)現(xiàn)，通過(guò)該功能可以允許只變更更新內(nèi)容，而不需將所有內(nèi)容進(jìn)行構(gòu)建，極大提升構(gòu)建速度。
1. 開(kāi)啟
- 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)聽(tīng)的模塊更新后，觸發(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)打開(kāi)瀏覽器、自動(dòng)刷新瀏覽器……)。為了實(shí)現(xiàn)該功能，可以借助webpack-dev-server，通過(guò)其可以構(gòu)建一個(gè)小型的Web服務(wù)器，能夠?qū)崟r(shí)重新加載。(注意：利用webpack-dev-server啟動(dòng)的項(xiàng)目只會(huì)在內(nèi)存中編譯打包，不會(huì)有任何輸出，這是因?yàn)樵L問(wèn)內(nèi)存中的代碼比訪問(wèn)文件系統(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)。
開(kāi)發(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就可以解決該問(wèn)題，只要能匹配一個(gè)即可退出。(注意：在oneOf中不能兩個(gè)配置處理同一種類型文件)
- module.exports = {
- // ...
- module: {
- rules: [
- {
- oneOf: [
- // ...
- ]
- }
- ]
- }
- }
2.1.2 babel緩存
Babel在轉(zhuǎn)義js文件過(guò)程中消耗性能較高，將babel-loader執(zhí)行的結(jié)果緩存起來(lái)，當(dāng)重新打包構(gòu)建時(shí)會(huì)嘗試讀取緩存，從而提高打包構(gòu)建速度、降低消耗。
- module.exports = {
- // ...
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- options: {
- // ...
- // 開(kāi)啟babel緩存。第二次構(gòu)建時(shí)，會(huì)讀取之前的緩存
- cacheDirectory: true
- }
- }
- ]
- }
- }
2.1.3 多進(jìn)程打包
webpack構(gòu)建過(guò)程中需要大量文件進(jìn)行解析和處理，所以構(gòu)建時(shí)文件讀寫(xiě)和計(jì)算密集型的操作，而運(yùn)行在Node.js之上的Webpack是單線程模型，所以構(gòu)建起來(lái)速度會(huì)比較慢，此時(shí)為了提升構(gòu)建速度，可以選擇發(fā)揮多核CPU電腦的功能，利用多進(jìn)程來(lái)提升構(gòu)建速度。可以利用thread-loader來(lái)進(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í)間比較長(zhǎng)才需要多進(jìn)程打包)。
- module.exports = {
- // ...
- module: {
- rules: [
- {
- // ...
- use: [
- {
- loader: 'thread-loader',
- options: {
- workers: 2 //兩個(gè)進(jìn)程
- }
- },
- // ...
- ]
- }
- ]
- }
- }
2.1.4 externals
externals告訴在Webpack要構(gòu)建的代碼中使用了哪些不用被打包的模塊，也就是說(shuō)在運(yùn)行時(shí)再去從外部獲取這些擴(kuò)展依賴，這樣就會(huì)減少打包的內(nèi)容，從而減少打包時(shí)間并減小包的體積。例如直接通過(guò)script標(biāo)簽從CDN中引入jQuery，而不是將它打包。
- module.exports = {
- externals: {
- // 拒絕jQuery被打包進(jìn)來(lái)
- jquery: 'jQuery'
- }
- }
2.1.5 DLL
DLL即動(dòng)態(tài)鏈接庫(kù)，使用該技術(shù)能夠?qū)δ承?kù)(react、vue、jquery……)進(jìn)行單獨(dú)打包，通過(guò)單獨(dú)打包后，后續(xù)可直接引用，不需要再次進(jìn)行打包(只需要打包一次)，極大提升構(gòu)建速度。在這個(gè)過(guò)程中主要涉及到三個(gè)步驟：
1.新建webpack.dll.js文件，用來(lái)進(jìn)行單獨(dú)打包生成動(dòng)態(tài)鏈接庫(kù)文件和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]'// 打包的庫(kù)里面向外暴露出去的內(nèi)容叫什么名字
- },
- plugins: [
- // 打包生成一個(gè)mainfest.json，從而提供和對(duì)應(yīng)包的映射
- new webpack.DllPlugin({
- name: '[name]_[hash]',// 映射庫(kù)的暴露的內(nèi)容名稱
- path: path.resolve(__dirname, 'dll/mainfest.json'),// 輸出文件路徑
- })
- ],
- mode: 'production'
- };
2.在webpack.config.js文件中配置webpack.DllReferencePlugin，從而在主文件中引入打包好的動(dòng)態(tài)鏈接庫(kù)文件，從而讓主文件知道哪些文件不需要打包，打包庫(kù)里的名字是什么……
- module.exports = {
- // ...
- plugins: [
- new webpack.DllReferencePlugin({
- manifest: resolve(__dirname, 'dll/mainfest.json')
- }),
- ]
- }
3.由于動(dòng)態(tài)鏈接庫(kù)文件并沒(méi)有被引入進(jìn)html文件中，利用add-asset-html-webpack-plugin插件即可將該鏈接庫(kù)文件在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í)更新的問(wèn)題，為了解決該問(wèn)題，則需要為webpack配置的文件名加上hash值。對(duì)于webpack中hash值主要有三種：hash、chunkhash、contenthash。由于緩存希望一個(gè)文件改動(dòng)只會(huì)影響該文件的緩存，其余文件緩存不失效，所以該hash值應(yīng)該選擇根據(jù)文件內(nèi)容生成的hash值contenthash，即文件命名中添加contenthash。
| hash值類型 | 特點(diǎn) |
|---|---|
| hash | 每次webpack構(gòu)建時(shí)生成一個(gè)唯一的hash值 |
| chunkhash | 根據(jù)chunk生成hash值，來(lái)源于同一個(gè)chunk，則hash值就一樣 |
| contenthash | 根據(jù)內(nèi)容生成hash值，文件內(nèi)容相同hash值就相同 |
2.2.2 tree shaking
通常用于描述移除 JavaScript上下文中的未引用代碼(dead-code),讓代碼體積變的更小。為了實(shí)現(xiàn)該功能，需要兩個(gè)前提條件：一是必須使用ES6模塊，二是開(kāi)啟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ù)引用的弊端，為了解決該問(wèn)題需要利用SplitChunksPlugin插件，即下面的防止重復(fù)的方法。
2.防止重復(fù)
利用SplitChunksPlugin可以進(jìn)行公共代碼提取，提取主要包括兩類：一類是可以將來(lái)自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()語(yǔ)法能夠?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()語(yǔ)法引入文件，這樣就起到懶加載的作用。
- document.getElementById('btn').addEventListener('click', () => {
- import(/*webpackChunkName: 'test'*/./test)
- .then(() => {})
- .catch(() => {})
- })
2.2.5 預(yù)加載
預(yù)加載主要用于加載未來(lái)可能使用的文件，利用預(yù)加載可以在使用之前提前加載文件。對(duì)于預(yù)加載，其實(shí)是在父chunk完成加載后瀏覽器空閑了再加載資源。通過(guò)在import()語(yǔ)法中添加webpackPrefetch：true來(lái)實(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)。
