記錄一次打包優化

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.$',， 如今，整個優化完成。