记录一次打包优化

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.$', ， 现在，整个优化完成。