Skip to content

Commit e25355d

Browse files
jmchiltonjmchilton
authored
Merge pull request galaxyproject#19851 from dannon/webpack-speed
Webpack build performance improvements
2 parents 918961c + 2b12eec commit e25355d

10 files changed

Lines changed: 828 additions & 347 deletions

File tree

‎client/package.json‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"resolutions": {
2323
"chokidar": "3.5.3",
2424
"prismjs": "1.29.0",
25-
"vue": "2.7.14",
25+
"vue": "2.7.16",
2626
"vue-loader": "15.11.1"
2727
},
2828
"dependencies": {
@@ -106,7 +106,7 @@
106106
"vega": "^5.30.0",
107107
"vega-embed": "^6.26.0",
108108
"vega-lite": "^5.21.0",
109-
"vue": "^2.7.14",
109+
"vue": "^2.7.16",
110110
"vue-echarts": "^7.0.3",
111111
"vue-infinite-scroll": "^2.0.2",
112112
"vue-multiselect": "^2.1.7",
@@ -146,7 +146,6 @@
146146
"@babel/plugin-transform-runtime": "^7.23.2",
147147
"@babel/preset-env": "^7.23.2",
148148
"@babel/preset-typescript": "^7.23.2",
149-
"@cerner/duplicate-package-checker-webpack-plugin": "^2.3.0",
150149
"@pinia/testing": "0.1.3",
151150
"@testing-library/jest-dom": "^6.4.8",
152151
"@types/d3": "^7.4.2",
@@ -168,7 +167,7 @@
168167
"babel-plugin-transform-import-meta": "^2.2.1",
169168
"buffer": "^6.0.3",
170169
"cpy-cli": "^5.0.0",
171-
"css-loader": "^6.8.1",
170+
"css-loader": "^7.1.2",
172171
"css-minimizer-webpack-plugin": "^5.0.1",
173172
"del": "^6.0.0",
174173
"eslint": "^8.52.0",
@@ -177,19 +176,20 @@
177176
"eslint-plugin-simple-import-sort": "^10.0.0",
178177
"eslint-plugin-vue": "^9.17.0",
179178
"eslint-plugin-vuejs-accessibility": "^2.2.0",
180-
"expose-loader": "^4.1.0",
179+
"expose-loader": "^5.0.1",
181180
"fake-indexeddb": "^6.0.0",
181+
"fork-ts-checker-webpack-plugin": "^9.0.2",
182182
"fs-extra": "^11.2.0",
183183
"gulp": "^4.0.2",
184184
"ignore-loader": "^0.1.2",
185-
"imports-loader": "^4.0.1",
185+
"imports-loader": "^5.0.0",
186186
"jest": "^29.7.0",
187187
"jest-environment-jsdom": "^29.7.0",
188188
"jest-fixed-jsdom": "^0.0.2",
189189
"jest-location-mock": "^2.0.0",
190190
"jsdom-worker": "^0.3.0",
191191
"json-loader": "^0.5.7",
192-
"mini-css-extract-plugin": "^2.7.6",
192+
"mini-css-extract-plugin": "^2.9.2",
193193
"msw": "^2.3.4",
194194
"openapi-msw": "^0.7.0",
195195
"openapi-typescript": "^7.3.0",
@@ -198,23 +198,23 @@
198198
"process": "^0.11.10",
199199
"raw-loader": "^4.0.2",
200200
"sass": "^1.69.4",
201-
"sass-loader": "^13.3.2",
201+
"sass-loader": "^16.0.5",
202202
"store": "^2.0.12",
203-
"style-loader": "^3.3.3",
203+
"thread-loader": "^4.0.4",
204204
"ts-jest": "^29.2.3",
205-
"ts-loader": "^9.5.0",
205+
"ts-loader": "^9.5.2",
206206
"tsconfig-paths-webpack-plugin": "^4.1.0",
207207
"typescript": "^5.7.3",
208208
"vue-loader": "^15.11.1",
209-
"vue-template-compiler": "^2.7.14",
210-
"webpack": "^5.89.0",
211-
"webpack-cli": "^5.1.4",
212-
"webpack-dev-server": "^4.15.1",
213-
"webpack-merge": "^5.10.0",
209+
"vue-template-compiler": "^2.7.16",
210+
"webpack": "^5.98.0",
211+
"webpack-cli": "^6.0.1",
212+
"webpack-dev-server": "^5.2.0",
213+
"webpack-merge": "^6.0.1",
214214
"xml-js": "^1.6.11",
215215
"xml2js": "^0.6.2",
216216
"yaml-jest": "^1.2.0",
217-
"yaml-loader": "^0.8.0"
217+
"yaml-loader": "^0.8.1"
218218
},
219219
"peerDependencies": {
220220
"postcss": "^8.4.6"

‎client/src/components/History/Export/HistoryExport.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ function updateExportParams(newParams: ExportParams) {
368368
<style scoped>
369369
.zenodo-info {
370370
display: flex;
371-
align-items: start;
371+
align-items: flex-start;
372372
gap: 0.5rem;
373373
}
374374
</style>

‎client/src/components/Sharing/Embeds/WorkflowEmbed.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,8 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
184184
.settings {
185185
flex: 1;
186186
display: flex;
187-
align-items: start;
188-
justify-content: start;
187+
align-items: flex-start;
188+
justify-content: flex-start;
189189
flex-direction: column;
190190
}
191191

‎client/src/components/Workflow/Editor/Tools/ToolBar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -524,7 +524,7 @@ function autoLayout() {
524524
display: flex;
525525
padding: 0.25rem;
526526
gap: 0.25rem;
527-
align-items: start;
527+
align-items: flex-start;
528528
flex-direction: column-reverse;
529529
align-self: flex-start;
530530

‎client/src/components/Workflow/List/WorkflowActionsExtend.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ const { copyPublicLink, copyWorkflow, downloadUrl, importWorkflow } = useWorkflo
229229
gap: 0.25rem;
230230
margin-top: 0.25rem;
231231
align-items: center;
232-
justify-content: end;
232+
justify-content: flex-end;
233233
234234
@container (max-width: #{$breakpoint-md}) {
235235
.compact-view {

‎client/src/components/Workflow/List/WorkflowCard.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -254,10 +254,10 @@ const dropdownOpen = ref(false);
254254
display: flex;
255255
align-items: center;
256256
flex-direction: row;
257-
justify-content: end;
257+
justify-content: flex-end;
258258
259259
@container workflow-card (max-width: #{$breakpoint-xs}) {
260-
align-items: end;
260+
align-items: flex-end;
261261
flex-direction: column-reverse;
262262
}
263263
}
@@ -277,7 +277,7 @@ const dropdownOpen = ref(false);
277277
.workflow-card-footer {
278278
display: flex;
279279
justify-content: space-between;
280-
align-items: end;
280+
align-items: flex-end;
281281
282282
.workflow-card-tags {
283283
max-width: 60%;

‎client/src/components/Workflow/Published/WorkflowPublished.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ onMounted(async () => {
279279
grid-column: 1 / span 3;
280280
281281
display: flex;
282-
justify-content: end;
282+
justify-content: flex-end;
283283
}
284284
285285
.workflow-preview {

‎client/src/layout/window-manager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** Adds window manager masthead icon and functionality **/
2-
import "winbox/dist/css/winbox.min.css";
2+
import "winbox/src/css/winbox.css";
33

44
import _l from "utils/localization";
55
import { withPrefix } from "utils/redirect";

‎client/webpack.config.js‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ const path = require("path");
44
const VueLoaderPlugin = require("vue-loader/lib/plugin");
55
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
66
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
7-
const DuplicatePackageCheckerPlugin = require("@cerner/duplicate-package-checker-webpack-plugin");
87
const { DumpMetaPlugin } = require("dumpmeta-webpack-plugin");
98
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
109
const TerserPlugin = require("terser-webpack-plugin");
10+
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
1111

1212
const scriptsBase = path.join(__dirname, "src");
1313
const testsBase = path.join(__dirname, "tests");
@@ -111,11 +111,21 @@ module.exports = (env = {}, argv = {}) => {
111111
{
112112
test: /\.tsx?$/,
113113
exclude: /node_modules/,
114-
loader: "ts-loader",
115-
options: {
116-
configFile: "tsconfig.webpack.json",
117-
appendTsSuffixTo: [/\.vue$/],
118-
},
114+
use: [
115+
{
116+
loader: "thread-loader",
117+
// options: { workers: 2 },
118+
},
119+
{
120+
loader: "ts-loader",
121+
options: {
122+
transpileOnly: true,
123+
happyPackMode: true, // IMPORTANT! use happyPackMode mode to allow thread-loader
124+
configFile: "tsconfig.webpack.json",
125+
appendTsSuffixTo: [/\.vue$/],
126+
},
127+
},
128+
],
119129
},
120130
{
121131
test: /\.mjs$/,
@@ -175,18 +185,16 @@ module.exports = (env = {}, argv = {}) => {
175185
},
176186
{
177187
loader: "css-loader",
178-
options: { sourceMap: true },
179188
},
180189
{
181190
loader: "postcss-loader",
182191
},
183192
{
184193
loader: "sass-loader",
185194
options: {
186-
sourceMap: true,
187195
sassOptions: {
188196
quietDeps: true,
189-
includePaths: [
197+
loadPaths: [
190198
path.join(styleBase, "scss"),
191199
path.resolve(__dirname, "./node_modules"),
192200
],
@@ -234,7 +242,6 @@ module.exports = (env = {}, argv = {}) => {
234242
new MiniCssExtractPlugin({
235243
filename: "[name].css",
236244
}),
237-
new DuplicatePackageCheckerPlugin(),
238245
new DumpMetaPlugin({
239246
filename: path.join(__dirname, "../lib/galaxy/web/framework/meta.json"),
240247
prepare: (stats) => ({
@@ -243,7 +250,22 @@ module.exports = (env = {}, argv = {}) => {
243250
epoch: Date.parse(buildDate),
244251
}),
245252
}),
253+
new ForkTsCheckerWebpackPlugin({
254+
async: false,
255+
typescript: {
256+
diagnosticOptions: {
257+
semantic: true,
258+
syntactic: true,
259+
},
260+
},
261+
}),
246262
],
263+
cache: {
264+
type: "filesystem",
265+
buildDependencies: {
266+
config: [__filename],
267+
},
268+
},
247269
devServer: {
248270
client: {
249271
overlay: {
@@ -265,8 +287,9 @@ module.exports = (env = {}, argv = {}) => {
265287
// proxy *everything* to the galaxy server.
266288
// someday, when we have a fully API-driven independent client, this
267289
// can be a more limited set -- e.g. `/api`, `/auth`
268-
proxy: {
269-
"**": {
290+
proxy: [
291+
{
292+
context: ["**"],
270293
// We explicitly use ipv4 loopback instead of localhost to
271294
// avoid ipv6/ipv4 resolution order issues; this should
272295
// align with Galaxy's default.
@@ -275,12 +298,12 @@ module.exports = (env = {}, argv = {}) => {
275298
changeOrigin: !!process.env.CHANGE_ORIGIN,
276299
logLevel: "debug",
277300
},
278-
},
301+
],
279302
},
280303
};
281304

282305
if (process.env.GXY_BUILD_SOURCEMAPS) {
283-
buildconfig.devtool = "source-map";
306+
buildconfig.devtool = "eval-cheap-module-source-map";
284307
}
285308

286309
return buildconfig;

0 commit comments

Comments
 (0)
⚡