記錄一次打包優化
webpack本地開發時，經常會出現開發著然後打包速度很慢的情況。酒店現在有大約59個頁面，這些頁面都進行了惰性載入，但是現在每個chunk打包出來的包很大 下面進行優化：
優化前先分析打包後的檔案
可以看見每個chunk都很大 有些快達到了1M。
使用 webpack-bundle-analyzer 分析輸出檔案，如下圖：
可以看出lodash被打包了很多次，導致載入lodash的 chunk 很大。
下面編輯其中某一個chunk，並且儲存，如下圖
重新打包時間達到了2.592s，其中起始檔案 index.0a8ac.js 達到了 841kb ,下面先優化各個 lodash 被載入很多次的問題。
lodash等公共包優化
加入webpack 非同步公共打包配置
new webpack.optimize.CommonsChunkPlugin({
name: 'index',
// the name or list of names must match the name or names
// of the entry points that create the async chunks
children: true,
// (use all children of the chunk)
async: true,
// (create an async commons chunk)
minChunks: 3,
// 必須至少3個chunk裡面包含該檔案才進行公共打包 (3 children must share the module before it's separated)
}),
複製程式碼
下面再來看：
打包後的檔案目錄大小
可以看見減少了很多，此時編輯重新打包發現大概只有1094ms，已經少了很多，但是每次打包
出來的 index.hash.js 還是很大，體積並沒有減少。先看看結構
可以看見moments佔用了很大體積，但是明明moment已經被抽離為了公共包進行打包，如下：
window.__REACT_LIB={
React:React,
ReactDOM:ReactDOM,
ReactRouter:ReactRouter,
antd:antd,
moment:moment,
backbone
};
複製程式碼
為什麼還會打包？該index檔案是由入口檔案包含路由 reducers等以router進行分塊之前的程式碼，故現在從app.js去查詢，發現如下程式碼：
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
雖然webpack打包配置裡面有下面的
externals:{
'react':'window.__REACT_LIB.React',
'react-dom':'window.__REACT_LIB.ReactDOM',
'react-router':'window.__REACT_LIB.ReactRouter',
'antd':'window.__REACT_LIB.antd',
'backbone':'window.__REACT_LIB.backbone',
'moment':'window.__REACT_LIB.moment',
},
複製程式碼
但是因為 import 'moment/locale/zh-cn'; 這行，moment又被重新打包了，現在去掉這行後。 現在看打包進度。
index檔案直接從814降到了276kb。優化完成 看打包檔案：
編輯單個chunk後的過載
現在chunk裡面還包含有jquery.js，這是因為minChunk:3設為3的緣故，業務裡面因為使用到了一個jqeury.fancyTree.js，該模組會去載入jquery.js
所以會這樣.現在去優化，加入，這樣載入時便會之前去查詢window.$變數。
'jquery':'window.$', ， 現在，整個優化完成。
