aboutsummaryrefslogtreecommitdiff
path: root/webpack.config.js
diff options
context:
space:
mode:
authorsilverwind2020-06-28 04:59:56 +0200
committerGitHub2020-06-27 22:59:56 -0400
commit7761245d087c9477ea7f3e50c60daecd6cc6ec14 (patch)
treead8884856cef8ccae786f3889cd9a51486a8b738 /webpack.config.js
parent2281b048af8837a33adfc9acfd3872022c789026 (diff)
Move fomantic and jQuery to main webpack bundle (#11997)
This saves around 3 MB binary size by not including useless fomantic files in the build. Also, this allows us to move jQuery into the main bundle as well which eliminates a few HTTP requests. Also included are webpack config changes: - split less and css loaders to speed up compliation - enable css sourcemaps - switch css minfier plugin to cssnano-webpack-plugin which works better for sourcemaps than the previous plugin Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Diffstat (limited to 'webpack.config.js')
-rw-r--r--webpack.config.js92
1 files changed, 63 insertions, 29 deletions
diff --git a/webpack.config.js b/webpack.config.js
index 09caeb402..fa96f42e9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,12 +1,10 @@
-const cssnano = require('cssnano');
const fastGlob = require('fast-glob');
const wrapAnsi = require('wrap-ansi');
+const CssNanoPlugin = require('cssnano-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const PostCSSPresetEnv = require('postcss-preset-env');
-const PostCSSSafeParser = require('postcss-safe-parser');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const TerserPlugin = require('terser-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
@@ -24,19 +22,31 @@ for (const path of glob('web_src/less/themes/*.less')) {
const isProduction = process.env.NODE_ENV !== 'development';
+const filterCssImport = (parsedImport, cssFile) => {
+ const url = parsedImport && parsedImport.url ? parsedImport.url : parsedImport;
+ const importedFile = url.replace(/[?#].+/, '').toLowerCase();
+ if (cssFile.includes('monaco')) return true;
+ if (cssFile.includes('fomantic')) {
+ if (/brand-icons/.test(importedFile)) return false;
+ if (/(eot|ttf|woff)$/.test(importedFile)) return false;
+ return true;
+ }
+ return cssFile.includes('node_modules');
+};
+
module.exports = {
mode: isProduction ? 'production' : 'development',
entry: {
index: [
+ resolve(__dirname, 'web_src/js/jquery.js'),
+ resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
resolve(__dirname, 'web_src/js/index.js'),
+ resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
resolve(__dirname, 'web_src/less/index.less'),
],
swagger: [
resolve(__dirname, 'web_src/js/standalone/swagger.js'),
],
- jquery: [
- resolve(__dirname, 'web_src/js/jquery.js'),
- ],
serviceworker: [
resolve(__dirname, 'web_src/js/serviceworker.js'),
],
@@ -66,12 +76,9 @@ module.exports = {
},
},
}),
- new OptimizeCSSAssetsPlugin({
- cssProcessor: cssnano,
- cssProcessorOptions: {
- parser: PostCSSSafeParser,
- },
- cssProcessorPluginOptions: {
+ new CssNanoPlugin({
+ sourceMap: true,
+ cssnanoOptions: {
preset: [
'default',
{
@@ -91,10 +98,10 @@ module.exports = {
monaco: {
test: /monaco-editor/,
name: 'monaco',
- chunks: 'async'
- }
- }
- }
+ chunks: 'async',
+ },
+ },
+ },
},
module: {
rules: [
@@ -150,12 +157,41 @@ module.exports = {
],
'@babel/plugin-proposal-object-rest-spread',
],
+ generatorOpts: {
+ compact: false,
+ },
},
},
],
},
{
- test: /\.(less|css)$/i,
+ test: /.css$/i,
+ use: [
+ {
+ loader: MiniCssExtractPlugin.loader,
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 1,
+ url: filterCssImport,
+ import: filterCssImport,
+ sourceMap: true,
+ },
+ },
+ {
+ loader: 'postcss-loader',
+ options: {
+ plugins: () => [
+ PostCSSPresetEnv(),
+ ],
+ sourceMap: true,
+ },
+ },
+ ],
+ },
+ {
+ test: /.less$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
@@ -164,11 +200,10 @@ module.exports = {
loader: 'css-loader',
options: {
importLoaders: 2,
- url: (_url, resourcePath) => {
- // only resolve URLs for dependencies
- return resourcePath.includes('node_modules');
- },
- }
+ url: filterCssImport,
+ import: filterCssImport,
+ sourceMap: true,
+ },
},
{
loader: 'postcss-loader',
@@ -176,10 +211,14 @@ module.exports = {
plugins: () => [
PostCSSPresetEnv(),
],
+ sourceMap: true,
},
},
{
loader: 'less-loader',
+ options: {
+ sourceMap: true,
+ },
},
],
},
@@ -232,9 +271,10 @@ module.exports = {
chunkFilename: 'css/[name].css',
}),
new SourceMapDevToolPlugin({
- filename: 'js/[name].js.map',
+ filename: '[file].map',
include: [
'js/index.js',
+ 'css/index.css',
],
}),
new SpriteLoaderPlugin({
@@ -251,12 +291,6 @@ module.exports = {
modulesDirectories: [
resolve(__dirname, 'node_modules'),
],
- additionalModules: [
- {
- name: 'fomantic-ui',
- directory: resolve(__dirname, 'node_modules/fomantic-ui'),
- },
- ],
renderLicenses: (modules) => {
const line = '-'.repeat(80);
return modules.map((module) => {