4-8 打包分析

1. 简介

上一节4-3~8 code-splitting,懒加载,预拉取,预加载 讲到如何对代码进行 code splitting。那么如何判断我们的代码要进行code splitting 或者对 code splitting 后的效果进行分析呢?这就需要用到一些辅助的打包分析工具。

2. 准备工作

为了进行代码分析,我们先准备一些用来打包的模块。

// index.js
import { log } from './log-util';
import $ from 'jquery';
const prettyMilliseconds = require('pretty-ms');

log(
    prettyMilliseconds(123)
);
const div = document.createElement('div');
div.innerText = 'first screen content';
document.getElementById('root').appendChild(div);
$('body').css('background', 'green');
// package.json
...
     entry: {
        index: "./src/index.js"
    },
...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }

3. webpack/analyse

首先,我们来看一下官方推荐的打包分析工具。打开 webpack/analyse,我们可以看到,运行方式非常简单。 在之前的打本脚本加一行如下命令:

"dev-analyse": "webpack --config ./build/webpack.dev.js --profile --json > stas.json",

运行该脚本,打包后如下:

image.png

同时会在项目下生成一个分析文件:

image.png

打开如下地址:

http://webpack.github.com/analyse

点击选择文件,上传刚才的 stas.json 文件(如果打不开或者切换效果不好,看下是不是上网方式不够科学):

image.png

会有如下分析结果:

image.png

open 和 home ,一个是弹出打开弹窗,重新选择 stats,一个就是当前所示的主页信息。

对于正常的打包结果,我们最需要关注的红框部分,可以看到当前 webpack 打包涉及的 module 有 5 个,chunk 有 3 个,asset 有 3 个。

我们先打开 modules 看看。

image.png

可以看到 5 个模块分别对应 5 个节点,其中 index 居中,引用了 log-util(实线),以及node_modules 下的 pretty-ms 和 jquery(虚线),而 pretty-ms 内部又引用了 parse-ms(实线)。

ps:这里实线和虚线我还没弄清具体的含义,没看到相关文档,也没时间去捣鼓这块逻辑,如果有知道的同学还请告知哈~(猜测是在不同的 chunk 中,所以用的虚线?)

还可以看到各个模块的大小,在打包过程中对应的 chunk,以及是否被构建。我们点击其中的 index 这个点,可以查看该模块更加详细的内容:

image.png

我们点击上方的 chunks 按钮,如下:

image.png

可以看到两个点,体积应该分别是对应大小。表格描述了 chunkid,chunname,包含的模块数量,大小,父父级,和标签(渲染,初始,入口等信息)。

再点击 assets ,可以看到打包后的资源信息:

image.png

warnings 和 error是提示打包过程中的告警和错误,这里我们打包流程正常,所以提示 no warnings 和 no errors。

最后我们看一下 hints,这里是分析软件给出的优化提示。

image.png

image.png

image.png

可以看到,总共给出了两条优化建议。 第一条,说我们的代码对同一模块有多次引用,但是我们检查源码是没有的。看图中的指示是 index 模块中出现了对其他模块的重复引用,我们去 index 模块详情看一下:

image.png

确实存在多次引用。这里是由于对模块副作用标记导致的(猜的),如果我们使用 product 模式,这个应该就不会有了。我们来看一下: 加一行脚本:

    "build-analyse": "webpack --config ./build/webpack.prod.js --profile --json > stas.json",

image.png

image.png

可以看到,打包后少了一个 log-util 模块的展示,

image.png

index 模块的依赖也确实变少了。打开 hints:

image.png

提示 1 已经没有了,而对于第二个提示,其实是要我们将模块外链预拉取,后面我们会讲到这里的优化。

4. 小结

关于更多的打包分析工具,可以参考这里,如果有 webpack 打包方面的优化需求,可以多尝试一下,平时的时候如果有空,感受一下即可,选一两款合适自己的,毕竟工具的学习也是有成本的:

  • webpack-chart: Interactive pie chart for webpack stats.
  • webpack-visualizer: Visualize and analyze your bundles to see which modules are taking up space and which might be duplicates.
  • webpack-bundle-analyzer: A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
  • webpack bundle optimize helper: This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
  • bundle-stats: Generate a bundle report(bundle size, assets, modules) and compare the results between different builds.

参考

https://webpack.js.org/guides/code-splitting/#bundle-analysis

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2-2 什么是模块打包工具

    关于模块和模块化,百度百科有一段引用自《Java应用架构设计:模块化模式与OSGi》一书的解释非常好:

    love丁酥酥
  • 4-12 环境变量的使用

    其实我么之前已经将webpack.config.js 按环境进行去了区分配置,那么在公共配置文件中我们能否知道当前所处的环境,并据此做逻辑区分呢?

    love丁酥酥
  • 4-10 webpack 与浏览器缓存(caching)

    浏览器在加载资源时,为了提高效率,会使用一定的缓存策略,比如强缓存,与协商缓存,那么如何保证在资源发布以后浏览器能拿到最新的资源而不是缓存呢?

    love丁酥酥
  • 【Webpack】373- 一看就懂之 webpack 高级配置与优化

    所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpack-plugin,只不过,在引入插件的时候是创建多个插件对象,因为...

    pingan8787
  • 前端开发:Vue项目打包步骤

    在前端开发过程中,开发项目编码是必须的能力,但是开发之后的上线也是不可缺少的技能。而且现在的前端开发用的打包都是借助于三方插件来完成的,本篇博文就来分享一下前端...

    三掌柜
  • 【大变天】AI来袭,一场风暴或到来!

    昨天,碧桂园老板杨国强在全国两会上提出:碧桂园将加快人工智能与建筑机器人深度融合,用机器人代替建筑工人。

    用户5997198
  • 2016 机器人世界杯:那些萌萌机器人摔倒的欢乐画面

    世界杯,除了人类世界,机器人也有它们的世界杯,并且一年举办一次,它就是 Robot World Cup,简称RoboCup。RoboCup 这个机器人足球比赛的...

    机器人网
  • 怎么解决koa写server发布的噩梦

    前言 ? . 以前在用koa写server的时候,发布简直是噩梦。需要将src里面的全部文件都覆盖掉,config配置文件也要覆盖,稍有不慎就会线上报各种各样的...

    企鹅号小编
  • ECCV 2020 的对抗相关论文(对抗生成、对抗攻击)

    本文汇总了ECCV 2020上部分对抗相关论文,后续公众号会随缘对一些paper做解读。感兴趣的同学,可先自行根据标题,搜索对应链接(有些paper可能未公布)...

    公众号机器学习与生成对抗网络
  • 腾讯 AI Lab 主任张潼博士:机器学习里的优化问题

    AI 科技评论按:日前,在由上海财经大学交叉科学研究院(RIIS)主办,杉数科技有限公司协办的「现代运筹学发展讨论会」上,腾讯 AI Lab(腾讯人工智能实验室...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券