flamegrill/docs/page-data/getting-started/page-data.json

{"componentChunkName":"component---src-templates-doc-jsx","path":"/getting-started","webpackCompilationHash":"cb7475d3ce9a19efe9b0","result":{"data":{"postBySlug":{"html":"<p>This example creates a basic app from scratch, adds an artificial bottleneck to it, and then shows you how to configure the build and run flamegrill to see the artificial bottleneck.</p>\n<h2 id=\"basic-app-setup\"><a href=\"#basic-app-setup\" aria-label=\"basic app setup permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Basic App Setup</h2>\n<ol>\n<li>Create App</li>\n</ol>\n<p>Create a basic Fabric app using:</p>\n<p><code class=\"language-text\">npm init uifabric</code></p>\n<ol start=\"2\">\n<li>Create Sample Hotspot</li>\n</ol>\n<p>In the app's <code class=\"language-text\">src/App.tsx</code> file, add an <code class=\"language-text\">InefficientComponent</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\"><span class=\"token keyword\">const</span> InefficientComponent<span class=\"token punctuation\">:</span> React<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">FunctionComponent</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// This is an abritrary bottleneck to show in flamegraph results.</span>\n  <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;</span> <span class=\"token number\">100</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>props<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<ol start=\"3\">\n<li>Add Hotspot to App</li>\n</ol>\n<p>In the same <code class=\"language-text\">src/App.tsx</code> file, use <code class=\"language-text\">InefficientComponent</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> App<span class=\"token punctuation\">:</span> React<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">FunctionComponent</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n   <span class=\"token keyword\">return</span> \n     <span class=\"token comment\">// ... </span>\n     <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">InefficientComponent</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n       </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span> <span class=\"token attr-name\">src</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>logo<span class=\"token punctuation\">}</span></span> <span class=\"token attr-name\">alt</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>logo<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n     </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">InefficientComponent</span></span><span class=\"token punctuation\">></span></span></code></pre></div>\n<ol start=\"4\">\n<li>Modify Build Configuration</li>\n</ol>\n<p>In the app's root directory, modify <code class=\"language-text\">webpack.config.js</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\">  <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// Here you can add custom webpack configurations</span>\n    optimization<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// We no not want to minimize our code.</span>\n      minimize<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span></code></pre></div>\n<ol start=\"5\">\n<li>Build App</li>\n</ol>\n<p><code class=\"language-text\">yarn build</code></p>\n<p>This should generate <code class=\"language-text\">dist/index.html</code> which we will use in flamegrill.</p>\n<h2 id=\"run-flamegrill\"><a href=\"#run-flamegrill\" aria-label=\"run flamegrill permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Run Flamegrill</h2>\n<ol>\n<li><a href=\"./installation\">Install Flamegrill</a></li>\n<li>Create an Output Directory</li>\n</ol>\n<p>Flamegrill will create file output, so find or create a directory from which to run flamegrill.</p>\n<ol start=\"3\">\n<li>Run Flamegrill</li>\n</ol>\n<p>Modifying the path as appropriate, run flamegrill against <code class=\"language-text\">dist/index.html</code> generated with the build above:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">flamegrill -n AppTest -s file:///C:/app/dist/index.html</code></pre></div>\n<h2 id=\"inspect-results\"><a href=\"#inspect-results\" aria-label=\"inspect results permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Inspect Results</h2>\n<p>In the directory where you run flamegrill, there should be an <code class=\"language-text\">AppTest.html</code> file which you can open in a browser. Opening it should reveal a flamegraph similar to the following, highlighting <code class=\"language-text\">InefficientComponent</code> as a bottleneck:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 690px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/ad686/results.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 51.03773584905661%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABLElEQVQoz4WSS07DMBCGfV1WXIEDcAM2HIIDsCgLUBCLEokSW+HR4jjOjB9x2zSRbdwECSGV9tNveWR5njZxVfW5XImqjqcY+l6IGgC6rtNaJ4MYxLQh4voUzjkhBOfc2nY7QlAppdNSABKggaNolVJqHPOBMgT3ACqj253SVh1lvIyTDaIk1hptnJGserquyyx1MHVxkub9gcTg0zB2PFvdnG83Lg0jtYe2Vc6ptlXW/pEZZS1aO3hPYgzJuTcCF3fTVDsE+ZjJ7L55niNlSGlTFPK1aGgBjCJLJ0wz5vsdmRzCFMPvq9g8zj4uzpZXl3J2q8s3RSnP8+V8/vWS80Uui0XydGUZhoH8vmMIe8W4BdnW1aau15z/nP8DOfAZQuh9SPhUyBTxoGL8Bn30M/4+bra6AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"flamegraph\"\n        title=\"flamegraph\"\n        src=\"/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/36727/results.png\"\n        srcset=\"/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/acf4b/results.png 173w,\n/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/fc834/results.png 345w,\n/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/36727/results.png 690w,\n/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/17fa4/results.png 1035w,\n/flamegrill/static/3370d90a72bd419ba2ef54a3fe012dc6/ad686/results.png 1060w\"\n        sizes=\"(max-width: 690px) 100vw, 690px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>We can see here that <code class=\"language-text\">InefficientComponent</code> stands out quite a bit, consuming 47.62% of total render time.</p>","frontmatter":{"title":"Getting Started"}},"tableOfContents":{"chapters":[{"title":"Overview","entries":[{"entry":{"id":"02170d78-20d5-5d28-bff0-983e2ba5bbcc","childMarkdownRemark":{"fields":{"slug":"/getting-started"},"frontmatter":{"title":"Getting Started"}}}},{"entry":{"id":"76ceda9a-9b08-5073-81eb-a00f91fac063","childMarkdownRemark":{"fields":{"slug":"/installation"},"frontmatter":{"title":"Installation"}}}}]},{"title":"CLI Reference","entries":[{"entry":{"id":"9dfd285a-389e-5c3f-8c10-95e1f3461556","childMarkdownRemark":{"fields":{"slug":"/cook"},"frontmatter":{"title":"cook"}}}}]}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/getting-started"}}}