前端webpack構建優化

從0到1負責手上項目一年多了，webpack雖然是老生常談的話題，但只有出現問題時，纔會去思考怎麼去優化。因爲項目裏引入了愈來愈多的依賴，因此本地開發編譯過程愈來愈慢，所以纔有了這一次的webpack優化。順便對一些生產環境的靜態資源也作了一些優化。

一.HappyPack多線程編譯

Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz 8核16線程

webpack 3.12.0 ThreadPool.size:16

本地構建速度：

51281ms（未引入happypack）

43750ms（引入happypack eslint-loader）

35862ms（引入happypack eslint-loader, vue-loader）

35476ms（引入happypack eslint-loader, vue-loader, babel-loader）

打包dist速度：

58192ms（未引入happypack）

49745ms（引入happypack eslint-loader）

46505ms（引入happypack eslint-loader, vue-loader）

43358ms（引入happypack eslint-loader, vue-loader, babel-loader）

從上面的實驗數據能夠得出：不管是本地構建仍是打包dist，eslint-loader，vue-loader，babel-loader的happypack對編輯速度都是有提高的。

二.TinyPng優化靜態圖片資源

tinypng.com/

三.優化loader配置

cacheDirectory開啓緩存，include去除無需處理文件。

// 配置前

{

    test: /\.js$/,

    loader: ‘babel-loader',

    include: [resolve('src'), resolve(’test'), resolve('node_modules/webpack-dev-server/client')],

},
複製代碼

// 配置後

{

    test: /\.js$/,

    loader: ‘babel-loader?cacheDirectory=true’,// 開啓緩存加速

    include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')], // 並沒有單測，去除test目錄

},
複製代碼

四.優化包查找路徑

使用絕對路徑，只在給定目錄中搜索，省去了查找依賴的時間損耗

由於默認設置是[node modules]。 從當前目錄找node_modules，若沒有，從../node_modules找，如果再沒有，繼續找../node_modules，直到找到爲止。

我手上的項目是直接存在src,build目錄同級的node_modules下的，因此能夠按照下面這樣修改。

// 配置前

resolve: {

    modules: ["node_modules」],

}
複製代碼

// 配置後

resolve: {

    modules: [path.join(__dirname, '..', "node_modules」)] // 這個路徑根據構建文件所在位置去調整，此處是build/webpack.base.conf.js，node_modules目錄與src目錄同級

}
複製代碼

五.消除無更新的圖片資源計算

因爲項目中的一些圖片資源是一直不變的，所以沒有必要每次都經過url-loader或file-loader加載打包，消除轉換base64url或者:hash:，因此圖片資源儘量使用絕對路徑引入/static下的文件，而不是經過import去引入。

出於優化成本考慮，我此次僅僅將超過limit的圖片進行轉移。

轉移前：vue.40add6f.png

轉移後：vue.png

例如預發環境，如果不一樣環境的BASE_URL不同，能夠經過DefinePlugin和<=%BASE_URL%=>傳入。

config.js

{

    dev:{

        BASE_URL:’/’,

    },

    build:{

        BASE_URL:’/foo/bar/’,

    }

}
複製代碼

webpack.dev.conf.js

plugins:{

    new webpack.DefinePlugin({

        BASE_URL:JSON.stringify(config.dev.BASE_URL),

    }),

},
複製代碼

webpack.prod.conf.js

plugins:{

    new webpack.DefinePlugin({

        BASE_URL:JSON.stringify(config.build.BASE_URL),

    }),

},
複製代碼

<link rel="icon" href=「<%=BASE_URL%>static/favicon.ico">

favicon.ico的路徑地址以下：

在開發環境是：localhost:9090/static/favicon.ico

在生產環境是：www.jsnb.com/foo/bar/sta…

在單文件組件內該如何操做呢？

很簡單，只要與src同級建立一個baseUrl.js，而後在文件中綁定到組件data函數上便可。

// eslint-disable-next-line no-undef

export default BASE_URL;

<img :src=「Logo" /> const Logo = `${baseUrl}static/logo.png`; data(){     return {         Logo,     } } 複製代碼

優勢：

1.遷移assets下大文件到static，減小計算hash時間，經過/static引入。

2.DefinePlugin，根據環境切換static引入路徑統一引入。（若經過webpack的resolve.alias統一引入，仍是會被url-loader加載，仍是會去作計算）。

缺點：

1.構建提高速度收效甚微

2.有緩存文件不能用此方法，會有緩存

3.圖片文件存放分散，不便於管理

建議：在沒有遇到因爲url-loader，file-loader加載圖片，視頻等本地資源慢的狀況下，能夠一直使用assets的方式，不用折騰。

六.提高開發環境rebuild速度

source map衆所周知是爲了webpack debug的一個配置，有7個配置。能夠參考官方文檔webpack.js.org/configurati…和我以前作的一個小實驗github.com/FrankKai/Fr…作對比。

開發環境：

devtool:’source-map’->devtool: ‘eval-source-map’

rebuild速度從--slow提高到了+pretty fast。

提速緣由是：SourceMap轉換爲DataUrl加載到eval()中。從新構建時速度更快，

官方文檔介紹以下：

eval-source-map - Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.

斯世濁清，全賴吾輩激揚！