From 3dcdbc3d611a533d436b110f57f9e868cb51b279 Mon Sep 17 00:00:00 2001 From: sienori Date: Sun, 30 May 2021 18:52:52 +0900 Subject: [PATCH] Fix slow CSS loading in Chrome --- package-lock.json | 18 ++++++++++++++++++ webpack.config.dev.js | 30 ++++-------------------------- webpack.config.dist.js | 29 ++++------------------------- webpack.utils.js | 8 ++++++++ 4 files changed, 34 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index e1bc749..8286614 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1693,6 +1693,16 @@ "dev": true, "optional": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -3926,6 +3936,13 @@ "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==", "dev": true }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "filesize": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz", @@ -9101,6 +9118,7 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 8489beb..6856445 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -8,7 +8,8 @@ const { getOutput, getCopyPlugins, getFirefoxCopyPlugins, - getEntry + getEntry, + getMiniCssExtractPlugin } = require("./webpack.utils"); const path = require("path"); const config = require("./config.json"); @@ -35,25 +36,6 @@ const generalConfig = { }, { test: /\.(scss|css)$/, - exclude: [path.resolve(__dirname, "src", "content")], - use: [ - { - loader: "style-loader" - }, - { - loader: "css-loader", - options: { - esModule: false - } - }, - { - loader: "sass-loader" - } - ] - }, - { - test: /\.(scss|css)$/, - include: [path.resolve(__dirname, "src", "content")], use: [ MiniCssExtractPlugin.loader, { @@ -92,9 +74,7 @@ module.exports = [ entry: getEntry(config.chromePath), output: getOutput("chrome", config.devDirectory), plugins: [ - new MiniCssExtractPlugin({ - filename: "[name]/[name].css" - }), + ...getMiniCssExtractPlugin(), ...getHTMLPlugins("chrome", config.devDirectory, config.chromePath), ...getCopyPlugins("chrome", config.devDirectory, config.chromePath) ] @@ -104,9 +84,7 @@ module.exports = [ entry: getEntry(config.firefoxPath), output: getOutput("firefox", config.devDirectory), plugins: [ - new MiniCssExtractPlugin({ - filename: "[name]/[name].css" - }), + ...getMiniCssExtractPlugin(), ...getFirefoxCopyPlugins("firefox", config.devDirectory, config.firefoxPath), ...getHTMLPlugins("firefox", config.devDirectory, config.firefoxPath), new BundleAnalyzerPlugin({ diff --git a/webpack.config.dist.js b/webpack.config.dist.js index 8a8863f..e20f87c 100644 --- a/webpack.config.dist.js +++ b/webpack.config.dist.js @@ -10,6 +10,7 @@ const { getCopyPlugins, getZipPlugin, getFirefoxCopyPlugins, + getMiniCssExtractPlugin, getEntry } = require("./webpack.utils"); const path = require("path"); @@ -40,25 +41,6 @@ const generalConfig = { }, { test: /\.(scss|css)$/, - exclude: [path.resolve(__dirname, "src", "content")], - use: [ - { - loader: "style-loader" - }, - { - loader: "css-loader", - options: { - esModule: false - } - }, - { - loader: "sass-loader" - } - ] - }, - { - test: /\.(scss|css)$/, - include: [path.resolve(__dirname, "src", "content")], use: [ MiniCssExtractPlugin.loader, { @@ -101,9 +83,7 @@ module.exports = [ }, plugins: [ new CleanWebpackPlugin(["dist", "temp"]), - new MiniCssExtractPlugin({ - filename: "[name]/[name].css" - }), + ...getMiniCssExtractPlugin(), ...getHTMLPlugins("chrome", config.tempDirectory, config.chromePath), ...getCopyPlugins("chrome", config.tempDirectory, config.chromePath), getZipPlugin(`${config.extName}-for-chrome-${extVersion}`, config.distDirectory) @@ -118,9 +98,7 @@ module.exports = [ }, plugins: [ new CleanWebpackPlugin(["dist", "temp"]), - new MiniCssExtractPlugin({ - filename: "[name]/[name].css" - }), + ...getMiniCssExtractPlugin(), ...getHTMLPlugins("firefox", config.tempDirectory, config.firefoxPath), ...getFirefoxCopyPlugins("firefox", config.tempDirectory, config.firefoxPath), getZipPlugin(`${config.extName}-for-firefox-${ffExtVersion}`, config.distDirectory) @@ -136,6 +114,7 @@ module.exports = [ entry: { other: path.resolve(__dirname, `src/background/background.js`) }, output: getOutput("copiedSource", config.tempDirectory), plugins: [ + ...getMiniCssExtractPlugin(), new CopyWebpackPlugin({ patterns: [ { diff --git a/webpack.utils.js b/webpack.utils.js index 685e094..723f0c0 100644 --- a/webpack.utils.js +++ b/webpack.utils.js @@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ZipPlugin = require("zip-webpack-plugin"); const path = require("path"); @@ -77,6 +78,12 @@ const getFirefoxCopyPlugins = (browserDir, outputDir = "dev", sourceDir = "src") }) ]; +const getMiniCssExtractPlugin = () => [ + new MiniCssExtractPlugin({ + filename: "[name]/[name].css" + }) +]; + const getZipPlugin = (browserDir, outputDir = "dist", exclude = "") => new ZipPlugin({ path: path.resolve(__dirname, `${outputDir}`), @@ -99,6 +106,7 @@ module.exports = { getOutput, getCopyPlugins, getFirefoxCopyPlugins, + getMiniCssExtractPlugin, getZipPlugin, getEntry };