记录一次打包优化

栏目: JavaScript · 发布时间: 6年前

内容简介:webpack本地开发时,经常会出现开发着然后打包速度很慢的情况。酒店现在有大约59个页面,这些页面都进行了惰性加载,但是现在每个chunk打包出来的包很大 下面进行优化:可以看见每个chunk都很大 有些快达到了1M。使用

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

记录一次打包优化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python金融大数据分析

Python金融大数据分析

[德] 伊夫·希尔皮斯科 / 姚军 / 人民邮电出版社 / 2015-12 / CNY 99.00

唯一一本详细讲解使用Python分析处理金融大数据的专业图书;金融应用开发领域从业人员必读。 Python凭借其简单、易读、可扩展性以及拥有巨大而活跃的科学计算社区,在需要分析、处理大量数据的金融行业得到了广泛而迅速的应用,并且成为该行业开发核心应用的首选编程语言。《Python金融大数据分析》提供了使用Python进行数据分析,以及开发相关应用程序的技巧和工具。 《Python金融大......一起来看看 《Python金融大数据分析》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试