Skip to content

Commit 9f2fb4e

Browse files
committed
Updating CSS to fix image dimensions in rendered article
1 parent bc8dcb5 commit 9f2fb4e

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

docs/best-practices/startup-times.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,16 @@ npm run start-ios-bundle
5656
5757
To give you a sense of how big of a difference webpack makes, let’s look at some before and after videos of applying webpack builds to the [NativeScript Groceries sample](https://github.com/nativescript/sample-Groceries). Here’s what Groceries looks like if you start it _without_ using webpack.
5858

59-
<div style="display: flex; max-width: 100%; height: 300px;">
60-
<img src="../img/best-practices/ios-start-up-0.gif">
61-
<img src="../img/best-practices/android-start-up-0.gif">
59+
<div style="display: flex; max-width: 100%;">
60+
<img src="../img/best-practices/ios-start-up-0.gif" style="height: 450px;">
61+
<img src="../img/best-practices/android-start-up-0.gif" style="height: 450px;">
6262
</div>
6363

6464
And here’s the same app with webpack turned on.
6565

66-
<div style="display: flex; max-width: 100%; height: 300px;">
67-
<img src="../img/best-practices/ios-start-up-1.gif">
68-
<img src="../img/best-practices/android-start-up-1.gif">
66+
<div style="display: flex; max-width: 100%;">
67+
<img src="../img/best-practices/ios-start-up-1.gif" style="height: 450px;">
68+
<img src="../img/best-practices/android-start-up-1.gif" style="height: 450px;">
6969
</div>
7070

7171
> **NOTE**:
@@ -104,9 +104,9 @@ If you open your `vendor.js` and `bundle.js` files, you should now see compresse
104104

105105
The more code you have, the more of a difference the UglifyJS optimization will make. Here’s what the NativeScript Groceries sample looks like with Uglify added to the webpack build process.
106106

107-
<div style="display: flex; max-width: 100%;height: 300px;">
108-
<img src="../img/best-practices/ios-start-up-2.gif">
109-
<img src="../img/best-practices/android-start-up-2.gif">
107+
<div style="display: flex; max-width: 100%;">
108+
<img src="../img/best-practices/ios-start-up-2.gif" style="height: 450px;">
109+
<img src="../img/best-practices/android-start-up-2.gif" style="height: 450px;">
110110
</div>
111111

112112
To recap our steps so far, you started by enabling webpack, which placed all of your application code into two files. Having your code in two files greatly reduced the file I/O NativeScript had to do when your app started, and your startup times improved.
@@ -138,7 +138,7 @@ There are two important things to note:
138138

139139
Because heap snapshots completely avoid the need to parse and execute the vast majority of your JavaScript on startup, they tend to speed up the startup times of NativeScript apps substantially. Here’s how the NativeScript Groceries app starts up on Android with heap snapshots enabled.
140140

141-
<img src="../img/best-practices/android-start-up-3.gif" style="height: 300px;">
141+
<img src="../img/best-practices/android-start-up-3.gif" style="height: 450px;">
142142

143143
> **NOTE**: For a far more technical explanation of how V8 heap snapshots work in NativeScript, and how you can configure and optimize the snapshots, check out [this article on the NativeScript blog](https://www.nativescript.org/blog/improving-app-startup-time-on-android-with-webpack-v8-heap-snapshot).
144144

0 commit comments

Comments
 (0)