narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix slow CSS loading in Chrome

Browse source
This commit is contained in:
sienori 2021-05-30 18:52:52 +09:00
parent 609f714c46
commit 3dcdbc3d61
4 changed files with 34 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
package-lock.json generated
View file

@ -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"
}
},

30
webpack.config.dev.js
View file

@ -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({

29
webpack.config.dist.js
View file

@ -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: [
{

8
webpack.utils.js
View file

@ -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
};