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配置方法詳解