WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.036 --> 00:00:03.106 align:middle I love our new setup! 00:00:03.526 --> 00:00:07.156 align:middle So it's time to talk about optimizing our build files for production. 00:00:07.876 --> 00:00:12.616 align:middle Yep, it's time to get serious, and make sure our files are minified 00:00:12.946 --> 00:00:16.696 align:middle and optimized to kick some performance butt! 00:00:17.186 --> 00:00:21.376 align:middle Because, right now, if you check out the size of the build directory: ... 00:00:21.886 --> 00:00:29.716 align:middle yea! These files are pretty huge - rep_log.js is over 1 megabyte and so is layout.js! 00:00:30.116 --> 00:00:35.606 align:middle If you looked inside, you would find the problem immediately: 00:00:36.316 --> 00:00:41.106 align:middle jQuery is packaged individually inside each of these! 00:00:41.656 --> 00:00:43.746 align:middle That's super wasteful! 00:00:44.286 --> 00:00:48.426 align:middle Our users should only need to download jQuery one time. 00:00:49.186 --> 00:00:49.806 align:middle No problem! 00:00:50.306 --> 00:00:53.076 align:middle Webpack has an awesome solution. 00:00:53.966 --> 00:00:56.026 align:middle Open webpack.config.js. 00:00:56.646 --> 00:01:00.346 align:middle Move the layout entry to the top - though, order doesn't matter. 00:01:01.126 --> 00:01:05.256 align:middle Now, change the method to createSharedEntry(). 00:01:05.256 --> 00:01:14.246 align:middle Before we talk about this, move back to your terminal and restart Encore: Then, 00:01:14.656 --> 00:01:17.446 align:middle I'll open a new tab - I love tabs! 00:01:18.056 --> 00:01:25.646 align:middle - and, when it finishes, check the file sizes again: Woh! 00:01:25.646 --> 00:01:31.896 align:middle rep_log.js is down from 1 megabyte to 300kb! 00:01:32.826 --> 00:01:37.616 align:middle layout.js is still big because it does still contain jQuery. 00:01:38.156 --> 00:01:42.756 align:middle But login.js - which was almost 800kb is now... 00:01:43.096 --> 00:01:46.686 align:middle 4! What is this magical shared entry!? 00:01:47.346 --> 00:01:53.616 align:middle To slightly over-simplify it, each project should have exactly one shared entry. 00:01:54.086 --> 00:01:59.536 align:middle And its JS file and CSS file should be included on every page. 00:02:00.436 --> 00:02:05.706 align:middle When you set layout.js as a shared entry, any modules included 00:02:05.706 --> 00:02:09.726 align:middle in layout.js are not repeated in other files. 00:02:09.726 --> 00:02:18.186 align:middle For example, when Webpack sees that jquery is required by login.js, it says: Hold on! 00:02:18.496 --> 00:02:23.816 align:middle jquery is already inculded in layout.js - the shared entry. 00:02:24.516 --> 00:02:28.926 align:middle So, I don't need to also put it in login.js. 00:02:29.746 --> 00:02:35.186 align:middle It's a great solution to the duplication problem: if you have a library 00:02:35.186 --> 00:02:39.276 align:middle that is commonly used, just make sure that you import it 00:02:39.526 --> 00:02:42.806 align:middle in layout.js, even if you don't need it there. 00:02:43.466 --> 00:02:45.496 align:middle You can experiment with the right balance. 00:02:46.516 --> 00:02:50.606 align:middle As soon as you do this, if you refresh, it works! 00:02:51.416 --> 00:02:58.146 align:middle I'm kidding - you'll totally get an errror: webpackJsonP is not defined To fix that, 00:02:58.496 --> 00:03:03.766 align:middle in your base layout, right before layout.js, add one more script tag. 00:03:04.526 --> 00:03:09.016 align:middle Point it to a new build/manifest.js file. 00:03:10.116 --> 00:03:12.436 align:middle The reason we need to do this is... 00:03:12.746 --> 00:03:14.156 align:middle well.. a bit technical. 00:03:14.816 --> 00:03:18.986 align:middle But basically, this helps with long-term caching, 00:03:19.426 --> 00:03:26.046 align:middle because it allows your giant layout.js file to change less often between deploys. 00:03:27.146 --> 00:03:34.466 align:middle Ok, this is great, but the files are still pretty big because they're not being minified. 00:03:35.266 --> 00:03:37.016 align:middle How can we tell Encore to do that? 00:03:39.576 --> 00:03:45.876 align:middle In your terminal, run: yarn run encore production That's it! 00:03:46.666 --> 00:03:50.596 align:middle This will take a bit longer: there's more magic happening behind the scenes. 00:03:53.706 --> 00:03:57.456 align:middle When it finishes, go back to your first open tab and run: 00:03:57.876 --> 00:04:02.596 align:middle ls -la public/build Let's check out the file sizes! 00:04:03.616 --> 00:04:10.886 align:middle The development rep_log.js that was 310kb is down to 74! 00:04:11.596 --> 00:04:17.586 align:middle Layout went from about 1 mb to 125kb. 00:04:17.586 --> 00:04:20.046 align:middle The CSS files are also way smaller. 00:04:20.926 --> 00:04:26.866 align:middle Yep, building for production is just one command: Encore handles all the details. 00:04:27.526 --> 00:04:30.656 align:middle Oh, and here's a trick to be even lazier. 00:04:31.366 --> 00:04:32.716 align:middle Open package.json. 00:04:33.846 --> 00:04:36.106 align:middle I'm going to paste a new script section. 00:04:36.946 --> 00:04:41.796 align:middle This gives you different shortcut commands for the different ways that you'll run Encore. 00:04:42.666 --> 00:04:47.436 align:middle Oh, we didn't talk about the dev-server, but it's another option for local development. 00:04:48.296 --> 00:04:53.636 align:middle Anyways, now, in the terminal, we can just say: yarn watch 00:04:54.146 --> 00:04:58.306 align:middle Or any of the other script commands - like yarn build for production. 00:04:59.636 --> 00:05:05.616 align:middle Talking about production, there's one last big question we need to answer: 00:05:06.316 --> 00:05:10.066 align:middle how the heck do you deploy your assets to production? 00:05:10.716 --> 00:05:13.376 align:middle Do we need to install Node on the production server? 00:05:14.076 --> 00:05:15.286 align:middle The answer is.... 00:05:15.536 --> 00:05:16.756 align:middle it depends. 00:05:17.496 --> 00:05:21.016 align:middle It depends on how sophisticated your deployment system is. 00:05:21.696 --> 00:05:26.996 align:middle Honestly, if you have a very simple deploy system - like a simple script, 00:05:27.376 --> 00:05:33.336 align:middle or maybe even some commands you run manually - then the easiest option is to install Node 00:05:33.336 --> 00:05:38.086 align:middle and yarn on your server and run encore production on your server 00:05:38.286 --> 00:05:40.156 align:middle after pulling down the latest files. 00:05:41.056 --> 00:05:47.656 align:middle I know: this isn't a great solution: it's a bummer to install Node just for this reason. 00:05:48.276 --> 00:05:51.726 align:middle But, it is a valid option and totally simple. 00:05:52.596 --> 00:05:56.646 align:middle A better solution is to run Encore on a different machine 00:05:57.056 --> 00:06:00.226 align:middle and then send the final, built files to your server. 00:06:00.916 --> 00:06:05.316 align:middle This highlights an important point: after you execute Encore, 00:06:05.646 --> 00:06:10.866 align:middle 100% of the files you need live in public/build. 00:06:11.846 --> 00:06:14.926 align:middle So, for example, after you execute: 00:06:15.036 --> 00:06:20.336 align:middle yarn run encore production you could send the public/build directroy 00:06:20.336 --> 00:06:23.916 align:middle to your production machine and it would work perfectly. 00:06:23.916 --> 00:06:28.946 align:middle If you have a "build" server, that's a great place to run this command. 00:06:29.516 --> 00:06:34.596 align:middle Or, if you watched our Ansistrano Tutorial, you could run Encore locally, 00:06:34.926 --> 00:06:37.686 align:middle and use the copy module to deploy those files. 00:06:37.686 --> 00:06:43.096 align:middle If you have any questions on your specific situation, you can ask us in the comments.