4/12/2023 0 Comments Minify files![]() When that section isn't in the webpack config file, webpack defaults to using its own minimizer preferences, which includes minifying JavaScript when the mode is set to production. The issue is that we're now manually configuring the optimization minimizer section of our webpack config. It was minified before, so what happened here? Nice!īut wait! If we look at our resulting JavaScript file, it's not minified! Hmmm. Now if we run yarn build and then check out the contents of our dist directory, we can see that the resulting CSS is minified. Now we can add that to an optimization section of our file: const merge = require('webpack-merge') Ĭonst MiniCssExtractPlugin = require('mini-css-extract-plugin') Ĭonst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') Ĭonst commonConfig = require('./') Let's install that dependency now: yarn add -dev optimize-css-assets-webpack-plugin We can minimize our CSS by using the optimize-css-assets-webpack-plugin. We're already minifying our JavaScript for the production build, but we're not minifying our CSS yet. src/index.js file in any way and then run yarn build again, you'll get a new content hash because the content has changed! Try it! Minifying CSS If you run yarn build again and compare your new output to your old output, you'll notice that the content hashes are exactly the same both times.īut, if you edit your. Now if you run yarn build, you'll see that both your JavaScript and your CSS has content hashes included: Webpack production build output with content hashes included Template: path.resolve(_dirname, 'src', 'index.html'), So that the entire file looks like this: const path = require('path') Ĭonst = require('clean-webpack-plugin') Ĭonst HtmlWebpackPlugin = require('html-webpack-plugin') įilename: '.js', // this line is the only difference Will change to this line: filename: '.js' To include the content hash in our JavaScript file names, we'll modify just one line of code in our file. But, if the file's contents do change, then the content hash also changes.īecause the file name will now change when the code changes, the browser will download the new file since it won't have that specific file name in its cache. If the file's contents don't change, the content hash doesn't change. As discussed earlier, the content hash is a string representation of the file's contents. To solve this problem, a common practice is to include the content hash in each file's name. But, when this same user visits your app again, the browser sees that it needs a main.js file, notes that it has a cached main.js file, and just uses the cached version. The contents of the main.js file have changed. Now, at some later point in time, you've released new code for your app. Then, a user visits your app and their browser caches the main.js file. So, what's the problem here? Imagine if we had a file called main.js used in our app. This means that if you visit the site again, your browser can use the cached files instead of requesting them again, so you get a faster page load time and a better experience. For example, if you've visited a website, and your browser had to download assets like JavaScript, CSS, or image files, your browser may cache those files so that it doesn't have to request them from the server again. Your browser tries to be helpful by caching files it has seen before. Why, you ask, would we want the content hash included in our file names? To help the browser understand when a file has changed! Since we've included the content hash in the generated CSS file, now is a good time to talk about cache busting. If you haven't read my previous article so far, it is recommended to have a look at first before you continue reading this article.Īlright, So I am assuming you have read and understood the above stated article, so let's continue our due part. Now it's time to minify and compress our generated css and js files for any possible production use. We have already learned so far how to compile your source code and extract css into separate css files (for production use) along with bundling using Webpack. This article is a continuation of my previous webpack article located here.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |