觀麥在 Webpack 的經驗

原文 https://github.com/gmfe/Think/issues/21

因爲涉及知識點多，不作具體的介紹，只點出關鍵內容。 對應代碼在 demo-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