Skip to content
Snippets Groups Projects
Commit 36335f5a authored by Christopher Johnson's avatar Christopher Johnson
Browse files

optimize css loading and split from js dist

parent d551c993
No related branches found
No related tags found
No related merge requests found
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
</style> </style>
<title>Mirador</title> <title>Mirador</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="../../../dist/main.css">
</head> </head>
<body> <body>
<h1>This is the first instance</h1> <h1>This is the first instance</h1>
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<title>Mirador</title> <title>Mirador</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="../../../dist/main.css">
</head> </head>
<body> <body>
<div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div> <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<link rel="stylesheet" href="../../../../dist/main.css">
<title>Mirador</title> <title>Mirador</title>
</head> </head>
<body> <body>
......
...@@ -19,5 +19,5 @@ describe('Window actions', () => { ...@@ -19,5 +19,5 @@ describe('Window actions', () => {
)); // only default configed windows found )); // only default configed windows found
await page.waitFor(1000); await page.waitFor(1000);
await expect(numWindows).toBe(2); await expect(numWindows).toBe(2);
}); }, 30000);
}); });
...@@ -46,5 +46,5 @@ describe('Window Sidebars', () => { ...@@ -46,5 +46,5 @@ describe('Window Sidebars', () => {
await expect(page).toClick(`#${windowId} button[aria-label="Toggle sidebar"]`); await expect(page).toClick(`#${windowId} button[aria-label="Toggle sidebar"]`);
await expect(page).toMatchElement(`#${windowId} button[aria-label="Index"]`); await expect(page).toMatchElement(`#${windowId} button[aria-label="Index"]`);
}); }, 30000);
}); });
...@@ -9,7 +9,6 @@ import { TextBlock, TextRow, RectShape } from 'react-placeholder/lib/placeholder ...@@ -9,7 +9,6 @@ import { TextBlock, TextRow, RectShape } from 'react-placeholder/lib/placeholder
import Img from 'react-image'; import Img from 'react-image';
import ManifestListItemError from '../containers/ManifestListItemError'; import ManifestListItemError from '../containers/ManifestListItemError';
import ns from '../config/css-ns'; import ns from '../config/css-ns';
import 'react-placeholder/lib/reactPlaceholder.css';
/** /**
* Handling open button click * Handling open button click
......
...@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; ...@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { import {
Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves, Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
} from 'react-mosaic-component'; } from 'react-mosaic-component';
import 'react-mosaic-component/react-mosaic-component.css';
import difference from 'lodash/difference'; import difference from 'lodash/difference';
import toPairs from 'lodash/toPairs'; import toPairs from 'lodash/toPairs';
import MosaicRenderPreview from '../containers/MosaicRenderPreview'; import MosaicRenderPreview from '../containers/MosaicRenderPreview';
......
@import url('~react-mosaic-component/react-mosaic-component.css');
@import url('~react-placeholder/lib/reactPlaceholder.css');
.mirador { .mirador {
&-viewer { &-viewer {
bottom: 0; bottom: 0;
......
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const paths = require('./config/paths'); const paths = require('./config/paths');
...@@ -37,11 +39,7 @@ const baseConfig = [ ...@@ -37,11 +39,7 @@ const baseConfig = [
babelLoaderConfig, babelLoaderConfig,
{ {
test: /\.s?css$/, test: /\.s?css$/,
use: [ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'sass-loader', // compiles Sass to CSS, using Node Sass by default
],
}, },
], ],
}, },
...@@ -50,6 +48,11 @@ const baseConfig = [ ...@@ -50,6 +48,11 @@ const baseConfig = [
new TerserPlugin({ new TerserPlugin({
extractComments: true, extractComments: true,
}), }),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
}),
], ],
}, },
output: { output: {
...@@ -60,6 +63,10 @@ const baseConfig = [ ...@@ -60,6 +63,10 @@ const baseConfig = [
path: path.join(__dirname, 'dist'), path: path.join(__dirname, 'dist'),
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({
chunkFilename: '[id].css',
filename: '[name].css',
}),
new webpack.IgnorePlugin({ new webpack.IgnorePlugin({
resourceRegExp: /@blueprintjs\/(core|icons)/, // ignore optional UI framework dependencies resourceRegExp: /@blueprintjs\/(core|icons)/, // ignore optional UI framework dependencies
}), }),
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment