Webpack的經驗分享

webpack 是一個模組打包器。它的主要目標是將JavaScript檔案打包在一起,打包後的檔案用於在瀏覽器中使用,但它也能夠勝任轉換(transform)、打包(bundle)或包裹(package)，本文主要和大家分享Webpack的一些經驗，希望能幫助大家。

快取

產生檔案名稱 [name].[contenthash:8].js，結合 max-age + cdn 來做快取。

網頁載入

html

以前是固定的一個html，html - 版本號js 檔案（透過webpack打出來的）-」透過版本號碼決定具體js 。 （現在想想不太合理，雖然沒和後台耦合這麼重）

現在是變動的html，透過HtmlWebpackPlugin 打出來（webpack 生成，裡麵包含版本號的js）

這樣也省了一個串列時間（拉版本號檔）。 同時也方便做灰度，例如發佈了需求，讓一部分使用者先體驗，動態打出 html 給到後台即可。 （固定 html 則沒這麼輕鬆做）

css分離

在觀麥，css變動會非常的少，這得益於 react-gm 對類別名稱的完善。 既然變動少，把 css 單獨出來也不錯，使用 ExtractTextPlugin 分離 css。

分離後減少 js 大小，不阻塞 js，同時 css 和 js 可同時拉取。

common

new CommonsChunkPlugin({name: 'commons'})

看打包後的 common 程式碼，會發現其他模組的id和hash都會打在common中，這樣每次 commons 檔案都會變，就很難做快取了。

提供兩個檔案清單即可，會發現 webpack 酒吧 id 和 hash 打在 manifest 檔案中。這樣commons就可以快取了。 btw，沒看到官網有介紹，看到的說聲。

new CommonsChunkPlugin({names: ['commons', 'manifest']})

本地開發

講講代理，本地開始是自己起的服務，沒有後台服務，自然需要代理到某個地方。 可透過 devServer.proxy 。也可代理到外網排查 bug，都是源碼，查 bug 非常快。

"proxy": {
    "/ticket/*": {
      "target": "http://dev.guanmai.cn:7413",
      "changeOrigin": true
    }
}

打包速度

DllPlugin

當專案大了後，必然需要打很多包，導致打包時間非常長。 官方推薦做法是把不常變動的文件打DLL。

我們工程就把 react react-dom prop-types classnames mobx#mobx-react lodash moment big.js 等打進來。

網路資料都介紹dll 的檔名是[name]_[hash].dll.js, 我們是[npm version]_dll.js npm version 是package.json version 讀進來的。

為什麼不用 hash 而是 npm version？我們在思考二次打包的時候遇到了問題，怎麼判斷 dll 是否需要重新打包？如果是 hash 怎麼搞（求推薦方案）。用 npm version 的話只要 version 一改變我們會重新打包，比如昇級了 react ，我們就會 version +，就會重新打包。

happypack

happypack 對 build 的速度大大大提示，可以多執行緒打包，cache 也讓 rebuild 加快。

devtool

開發用eval，生產用source-map（用於排查顯示問題，犧牲了打包速度，在可接受範圍內）

babel-loader

記得cacheDirectory

noParse && alias

有些函式庫不需要解析的，noParse 設定不解析，同時alias 指向x.min.js 檔案。

tree shaking

沒有用上，感覺還不是時候。有篇文章不錯你的Tree-Shaking並沒有什麼卵用

壓縮

UglifyJsPlugin

一開始用的是webpack.optimize.UglifyJsPlugin，那時1.x版本，webpack 是基於uglify-js@2.x。

現在 webpack 單獨出來了, 也多了很多功能，支援 cache ，支援多核心壓縮，我試用了下速度還是挺快的。 webpack.optimize.UglifyJsPlugin 其實是 uglifyjs-webpack-plugin。

令我奇怪的是官方說是基於 uglify-es 。但我看依賴還是 uglify-js。奇怪。

UglifyJsParallelPlugin

在官方沒出來前用的是 webpack-uglify-parallel , 支持多核心。速度和 uglifyjs-webpack-plugin 差不了多少。

寫文章是翻了下 github，發現7月份的時候開始廢棄了，整合到官方了。

其他

babel 出的 babel-minify-webpack-plugin，保持觀望。

腳本cdn

有些js(gm-fetch babel-polyfill) 實在是非常少非常少變動，用webpack 打包有點浪費，可以透過cdn 獲取，script 形式放入html 文件內。

分析

有圖表，非常直覺的分析。我比較喜歡。
webpack-monitor

老牌的是webpack-bundle-analyzer

相關建議：

Web使用webpack建立前端專案的實例程式碼

webpack設定方法小結

node.js中的npm與webpack設定方法詳解

以上是Webpack的經驗分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！