记录一次打包优化

6,128 阅读2分钟

webpack本地开发时,经常会出现开发着然后打包速度很慢的情况。 酒店现在有大约59个页面,这些页面都进行了惰性加载,但是现在每个chunk打包出来的包很大 下面进行优化:

优化前先分析打包后的文件

image

可以看见每个chunk都很大 有些快达到了1M。

使用webpack-bundle-analyzer分析输出文件,如下图:

image

可以看出lodash被打包了很多次,导致加载lodash的chunk很大。

下面编辑其中某一个chunk,并且保存,如下图

image

重新打包时间达到了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)
    }),

下面再来看:

打包后的文件目录大小

image

可以看见减少了很多,此时编辑重新打包发现大概只有1094ms,已经少了很多,但是每次打包

出来的index.hash.js还是很大,体积并没有减少。先看看结构

image

可以看见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又被重新打包了,现在去掉这行后。 现在看打包进度。

image

index文件直接从814降到了276kb。优化完成 看打包文件:

image

编辑单个chunk后的重载

image

现在chunk里面还包含有jquery.js,这是因为minChunk:3设为3的缘故,业务里面因为使用到了一个jqeury.fancyTree.js,该模块会去加载jquery.js

所以会这样.现在去优化,加入,这样载入时便会之前去查找window.$变量。

'jquery':'window.$',, 现在,整个优化完成。

image