perf: move css out of JS to fix layout shift

Th3S4mur41 · May 6, 2021 · 6bf9dd4 · 6bf9dd4
1 parent d8065f4
commit 6bf9dd4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
 		"html-loader": "^2.1.2",
 		"html-webpack-plugin": "^5.3.1",
 		"husky": "^6.0.0",
+		"mini-css-extract-plugin": "^1.6.0",
 		"node-sass": "^5.0.0",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.2.13",

diff --git a/webpack.common.js b/webpack.common.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
@@ -33,7 +34,10 @@ module.exports = {
 			{
 				test: /\.s[ac]ss$/i,
 				use: [
-					'style-loader',
+					{
+						loader: MiniCssExtractPlugin.loader,
+						options: {}
+					},
 					{
 						loader: 'css-loader',
 						options: {
@@ -64,6 +68,7 @@ module.exports = {
 		new HtmlWebpackPlugin({
 			template: 'src/index.html',
 			filename: './index.html'
-		})
+		}),
+		new MiniCssExtractPlugin()
 	]
 };