From 35a04d91683e9f686c8a08158f9896edb1fc9a21 Mon Sep 17 00:00:00 2001 From: Anthony Le Courric Date: Mon, 11 Dec 2023 10:01:41 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(lti)=20separate=20css=20from?= =?UTF-8?q?=20the=20js=20bundle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We need css files and font from the Cunningham packages to style our app, but the css was included directly in the js bundle, which was not optimal. The css is now in a separate file, which is loaded in the html template. This allows the browser to cache the css file and improves the loading time of the page. --- CHANGELOG.md | 1 + .../marsha/core/templates/core/resource.html | 1 + .../marsha/core/templates/core/site.html | 1 + src/backend/marsha/e2e/test_lti.py | 12 ++++++----- src/frontend/apps/lti_site/package.json | 3 ++- src/frontend/apps/lti_site/webpack.config.js | 21 +++++++++++++++++-- src/frontend/yarn.lock | 7 +++++++ 7 files changed, 38 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c77d6e2b5..3b7f925a07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ Versioning](https://semver.org/spec/v2.0.0.html). ### Changed - Replace grommet Image and Grid component (#2518) +- Optimized apps bundle (#2528) ## [4.9.0] - 2023-12-04 diff --git a/src/backend/marsha/core/templates/core/resource.html b/src/backend/marsha/core/templates/core/resource.html index a03d3dd94d..a53feb9884 100644 --- a/src/backend/marsha/core/templates/core/resource.html +++ b/src/backend/marsha/core/templates/core/resource.html @@ -12,6 +12,7 @@
+ {% for external_script in external_javascript_scripts %} {% endfor %} diff --git a/src/backend/marsha/core/templates/core/site.html b/src/backend/marsha/core/templates/core/site.html index b739588f9f..5c9cffea47 100644 --- a/src/backend/marsha/core/templates/core/site.html +++ b/src/backend/marsha/core/templates/core/site.html @@ -11,6 +11,7 @@
+ {% for external_script in external_javascript_scripts %} {% endfor %} diff --git a/src/backend/marsha/e2e/test_lti.py b/src/backend/marsha/e2e/test_lti.py index 1b07ccdd72..12af1f8f73 100644 --- a/src/backend/marsha/e2e/test_lti.py +++ b/src/backend/marsha/e2e/test_lti.py @@ -673,11 +673,13 @@ def test_lti_video_play(page: Page, live_server: LiveServer, mock_video_cloud_st ).get("en-US") def check_xapi_played(request: Request): - """Check xapi played call.""" - assert request.method == "POST" - assert ( - request.post_data_json.get("verb").get("display").get("en-US") == "played" - ) + # """Check xapi played call.""" + if "/xapi/" in request.url: + assert request.method == "POST" + assert ( + request.post_data_json.get("verb").get("display").get("en-US") + == "played" + ) page.on("request", check_xapi_played) diff --git a/src/frontend/apps/lti_site/package.json b/src/frontend/apps/lti_site/package.json index d964b7711a..40e1fe8992 100644 --- a/src/frontend/apps/lti_site/package.json +++ b/src/frontend/apps/lti_site/package.json @@ -29,6 +29,7 @@ "@babel/preset-env": "7.23.5", "@babel/preset-react": "7.23.3", "@babel/preset-typescript": "7.23.3", + "@faker-js/faker": "*", "@formatjs/cli": "6.2.4", "@testing-library/jest-dom": "*", "@testing-library/react": "*", @@ -56,13 +57,13 @@ "css-loader": "6.8.1", "eslint": "*", "eslint-config-marsha": "*", - "@faker-js/faker": "*", "fetch-mock": "9.11.0", "jest": "29.7.0", "jest-environment-jsdom": "29.7.0", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "7.2.0", "lib-tests": "*", + "mini-css-extract-plugin": "2.7.6", "node-fetch": "2.6.7", "prettier": "*", "sass": "1.69.5", diff --git a/src/frontend/apps/lti_site/webpack.config.js b/src/frontend/apps/lti_site/webpack.config.js index ecec76a8f8..d21808cf78 100644 --- a/src/frontend/apps/lti_site/webpack.config.js +++ b/src/frontend/apps/lti_site/webpack.config.js @@ -1,6 +1,10 @@ const TerserPlugin = require('terser-webpack-plugin'); const webpack = require('webpack'); const { alias } = require('marsha-config'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +const outputDir = + __dirname + '/../../../backend/marsha/static/js/build/lti_site'; module.exports = (_, argv) => { process.env.NODE_ENV = argv.mode || 'development'; @@ -27,7 +31,7 @@ module.exports = (_, argv) => { // is on AWS. output: { filename: 'index.js', - path: __dirname + '/../../../backend/marsha/static/js/build/lti_site', + path: outputDir, chunkFilename: '[id].[fullhash].index.js', clean: true, }, @@ -48,7 +52,19 @@ module.exports = (_, argv) => { module: { rules: [ - { test: /\.css$/, use: ['style-loader', 'css-loader'] }, + { + test: /\.css$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: outputDir, + }, + }, + 'css-loader', + ], + sideEffects: true, + }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', @@ -102,6 +118,7 @@ module.exports = (_, argv) => { Buffer: ['buffer', 'Buffer'], process: 'process/browser.js', }), + new MiniCssExtractPlugin(), ], }; diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index a7c0c921f3..ad59bf4368 100644 --- a/src/frontend/yarn.lock +++ b/src/frontend/yarn.lock @@ -12955,6 +12955,13 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== +mini-css-extract-plugin@2.7.6: + version "2.7.6" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz#282a3d38863fddcd2e0c220aaed5b90bc156564d" + integrity sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw== + dependencies: + schema-utils "^4.0.0" + mini-css-extract-plugin@^2.4.5: version "2.7.2" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz#e049d3ea7d3e4e773aad585c6cb329ce0c7b72d7"