圖解Webpack之優化篇
首先用一張利用MindMaster繪制思維導圖開篇來闡述本文的主要內容，讀者可在此基礎上進行擴展自己的思維導圖。webpack除了基礎的配置外，還需要進行優化。對于開發環境主要優化打包構建速度和代碼調試;對于生產環境主要優化打包的構建速度和代碼運行的性能。
一、開發環境
1.1 構建速度
在開發環境中為了提升代碼構建速度，可以利用HMR(模塊熱替換)來實現，通過該功能可以允許只變更更新內容，而不需將所有內容進行構建，極大提升構建速度。
1. 開啟
- module.exports = {
- // ...
- devServer: {
- hot: true,
- }
- }
2.樣式文件
對于樣式文件，借助于style-loader即可實現模塊熱替換，這是因為此loader使用了module.hot.accept，在樣式改變后就可以熱更新到style標簽中。
3.js文件
對于js文件默認不能使用HMR功能，為了讓js文件支持該功能，可以借助于module.hot.accept這個接口，當監聽的模塊更新后，觸發一個回調函數對更新做出響應。(注意：只能處理非入口js文件，因為入口js文件會引入其它文件，重新引入導致重新加載)。
- // 判斷是否啟動熱更新
- if (module.hot) {
- module.hot.accept('./js/add.js', () => {
- console.log(add(1, 2));
- });
- }
1.2 代碼調試
1.2.1 devServer
devServer主要目的是實現自動化(自動編譯、自動打開瀏覽器、自動刷新瀏覽器……)。為了實現該功能，可以借助webpack-dev-server，通過其可以構建一個小型的Web服務器，能夠實時重新加載。(注意：利用webpack-dev-server啟動的項目只會在內存中編譯打包，不會有任何輸出，這是因為訪問內存中的代碼比訪問文件系統化中的文件更快)
- 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，每個值具體含義可參照官網。
開發環境要求構建速度快、調試更友好。構建速度快，肯定采用內聯方式(eval和inline);為了使調試更友好，則需要定位到代碼位置，可以使用source-map、cheap-module-source-map、cheap-source-map。綜上所述可以使用eval-source-map 或 eval-cheap-module-source-map。
因為內聯方式會讓代碼體積變大，所以在生產環境下不用內聯方式。在生產環境條件下，需要考慮兩點：源代碼是否需要隱藏、調試如何更友好。若隱藏代碼可以使用nosource-source-map和hidden-source-map;為了調試更友好，可采用source-map和cheap-module-source-map。
- module.exports = {
- // ...
- devtool: 'eval-source-map'
- }
二、生產環境
2.1 打包構建速度
2.1.1 oneOf
每個文件對于rules中的所有規則都會遍歷一遍，如果使用oneOf就可以解決該問題，只要能匹配一個即可退出。(注意：在oneOf中不能兩個配置處理同一種類型文件)
- module.exports = {
- // ...
- module: {
- rules: [
- {
- oneOf: [
- // ...
- ]
- }
- ]
- }
- }
2.1.2 babel緩存
Babel在轉義js文件過程中消耗性能較高，將babel-loader執行的結果緩存起來，當重新打包構建時會嘗試讀取緩存，從而提高打包構建速度、降低消耗。
- module.exports = {
- // ...
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- options: {
- // ...
- // 開啟babel緩存。第二次構建時，會讀取之前的緩存
- cacheDirectory: true
- }
- }
- ]
- }
- }
2.1.3 多進程打包
webpack構建過程中需要大量文件進行解析和處理，所以構建時文件讀寫和計算密集型的操作，而運行在Node.js之上的Webpack是單線程模型，所以構建起來速度會比較慢，此時為了提升構建速度，可以選擇發揮多核CPU電腦的功能，利用多進程來提升構建速度。可以利用thread-loader來進行多進程打包，將該loader放置在其他loader之前， 放置在這個 loader 之后的 loader 就會在一個單獨的 worker 池(worker pool)中運行(注意：每個 worker 都是一個單獨的有 600ms 限制的 node.js 進程，只有工作消耗時間比較長才需要多進程打包)。
- module.exports = {
- // ...
- module: {
- rules: [
- {
- // ...
- use: [
- {
- loader: 'thread-loader',
- options: {
- workers: 2 //兩個進程
- }
- },
- // ...
- ]
- }
- ]
- }
- }
2.1.4 externals
externals告訴在Webpack要構建的代碼中使用了哪些不用被打包的模塊，也就是說在運行時再去從外部獲取這些擴展依賴，這樣就會減少打包的內容，從而減少打包時間并減小包的體積。例如直接通過script標簽從CDN中引入jQuery，而不是將它打包。
- module.exports = {
- externals: {
- // 拒絕jQuery被打包進來
- jquery: 'jQuery'
- }
- }
2.1.5 DLL
DLL即動態鏈接庫，使用該技術能夠對某些庫(react、vue、jquery……)進行單獨打包，通過單獨打包后，后續可直接引用，不需要再次進行打包(只需要打包一次)，極大提升構建速度。在這個過程中主要涉及到三個步驟：
1.新建webpack.dll.js文件，用來進行單獨打包生成動態鏈接庫文件和mainfest.json,這樣在以后構建的時候就不用重復打包了，可直接引用。(該文件中用到DllPlugin插件，用于生成mainfest.json文件，提供一個映射關系)
- 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]'// 打包的庫里面向外暴露出去的內容叫什么名字
- },
- plugins: [
- // 打包生成一個mainfest.json，從而提供和對應包的映射
- new webpack.DllPlugin({
- name: '[name]_[hash]',// 映射庫的暴露的內容名稱
- path: path.resolve(__dirname, 'dll/mainfest.json'),// 輸出文件路徑
- })
- ],
- mode: 'production'
- };
2.在webpack.config.js文件中配置webpack.DllReferencePlugin，從而在主文件中引入打包好的動態鏈接庫文件，從而讓主文件知道哪些文件不需要打包，打包庫里的名字是什么……
- module.exports = {
- // ...
- plugins: [
- new webpack.DllReferencePlugin({
- manifest: resolve(__dirname, 'dll/mainfest.json')
- }),
- ]
- }
3.由于動態鏈接庫文件并沒有被引入進html文件中，利用add-asset-html-webpack-plugin插件即可將該鏈接庫文件在html中自動引入。
- module.exports = {
- // ...
- plugins: [
- new AddAssetHtmlWebpackPlugin({
- filepath: resolve(__dirname, 'dll/jquery.js')
- })
- ]
- }
2.2 代碼運行性能
2.2.1 緩存
獲取資源是比較耗費時間的，利用緩存可以降低網絡流量，使網站加載速度更快。由于強緩存會存在內容不能及時更新的問題，為了解決該問題，則需要為webpack配置的文件名加上hash值。對于webpack中hash值主要有三種：hash、chunkhash、contenthash。由于緩存希望一個文件改動只會影響該文件的緩存，其余文件緩存不失效，所以該hash值應該選擇根據文件內容生成的hash值contenthash，即文件命名中添加contenthash。
| hash值類型 | 特點 |
|---|---|
| hash | 每次webpack構建時生成一個唯一的hash值 |
| chunkhash | 根據chunk生成hash值，來源于同一個chunk，則hash值就一樣 |
| contenthash | 根據內容生成hash值，文件內容相同hash值就相同 |
2.2.2 tree shaking
通常用于描述移除 JavaScript上下文中的未引用代碼(dead-code),讓代碼體積變的更小。為了實現該功能，需要兩個前提條件：一是必須使用ES6模塊，二是開啟production環境。(注意：為了放置將可能有副作用的文件(例如：css文件)刪除掉，則需要將其添加到package.json文件中的sideEffects的配置中(例如："sideEffects":["*.css"]))。
2.2.3 代碼分割
代碼分割就是把打包輸出的代碼分離到不同的bundle中，然后可以按需加載或并行加載這些文件。常用的方法主要有三種：入口起點、防止重復、動態導入。
1.入口起點
利用單入口和多入口(對象形式)的方式進行拆分，有一個入口就會輸出一個bundle。對于這種方式存在重復引用的弊端，為了解決該問題需要利用SplitChunksPlugin插件，即下面的防止重復的方法。
2.防止重復
利用SplitChunksPlugin可以進行公共代碼提取，提取主要包括兩類：一類是可以將來自node_modules文件夾下的模塊單獨打包為一個chunk輸出;另一類是對于多入口，會自動分析多入口chunk中公共文件(該文件大于30kb才會單獨打包)并單獨打包為一個chunk。
- module.exports = {
- // ...
- optimization: {
- splitChunks: {
- chunks: 'all'
- }
- }
- }
3.動態導入
利用import()語法能夠實現動態導入，從而將某個文件單獨打包。
- import(/* webpackChunkName: 'add' */'./js/add')
- .then(({ add }) => {
- console.log(add(1, 2));
- })
- .catch(() => {})
2.2.4 懶加載
懶加載是一種很好的優化方式，當代碼被需要時才會進行下載，這樣就加快了應用的初始加載速度并減輕了代碼的總體體積(因為有些代碼永遠不會被加載)。實現方式就是在異步代碼中使用import()語法引入文件，這樣就起到懶加載的作用。
- document.getElementById('btn').addEventListener('click', () => {
- import(/*webpackChunkName: 'test'*/./test)
- .then(() => {})
- .catch(() => {})
- })
2.2.5 預加載
預加載主要用于加載未來可能使用的文件，利用預加載可以在使用之前提前加載文件。對于預加載，其實是在父chunk完成加載后瀏覽器空閑了再加載資源。通過在import()語法中添加webpackPrefetch：true來實現預加載。
- import(/*webpackChunkName: 'test',webpackPrefetch: true*/./test)
- .then(() => {})
- .catch(() => {})
本文轉載自微信公眾號「前端點線面」，作者前端點線面。轉載本文請聯系前端點線面公眾號。
