Dans l’article précédent React sans create-react-app, suite, j’ai développé une application React pour choisir des couleurs et les copier dans le presse-papier clipboard. Je vais maintenant construire build cette application pour la production, afin de pouvoir l’embarquer embed dans une page HTML existante et qu’elle soit correctement exécutée dans les navigateurs courants. Le code javascript est exécuté sur le client, on intègre le script transpilé à l’aide de la balise <script>.
Par défaut, Webpack inclue les styles dans le fichier javascript transpilé index-bundle.js. Alors que cela fonctionne très bien pour les versions de développement, nous ne voulons pas de cela pour la production, et préférerons des styles séparés. J’utilise le plugin Mini CSS Extract pour la production, il ralentit légèrement la construction, mais permet de disposer de deux fichiers séparés pour le javascript et pour les styles.
Pour notre application de l’article précédent, le fichier bundle javascript pour le développement fait 1, 6Mo alors que le fichier pour la production fait 276 ko.
On installe le plugin :
|
1 |
xavier@server:.../mib-colors$ yarn add mini-css-extract-plugin -D |
On crée un fichier de configuration Webpack pour la production prod.config.js :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'prod-bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.scss$/, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { sourceMap: false } }, { loader: 'sass-loader', options: { sourceMap: false } } ] } ] }, resolve: { extensions: ['.js', '.scss'] }, mode: 'production', plugins: [ new HtmlWebPackPlugin({ template: './src/index.html' //source html }), new MiniCssExtractPlugin({ filename: 'mib-colors.css', chunkFilename: 'mib-colors-chunk.css' }) ] } |
Le fichier package.json contient les scripts suivants :
|
1 2 3 4 5 6 7 |
... "scripts": { "start": "webpack serve", "build:prod": "webpack --config prod.config.js", "buid:dev": "webpack" }, ... |
Pour lancer la transpilation pour la production, on lance
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
xavier@server:.../mib-colors$ yarn build:prod yarn run v1.22.10 $ webpack --config prod.config.js asset prod-bundle.js 354 KiB [emitted] [minimized] [big] (name: main) 1 related asset asset mib-colors.css 719 bytes [emitted] (name: main) asset index.html 459 bytes [emitted] Entrypoint main [big] 355 KiB = mib-colors.css 719 bytes prod-bundle.js 354 KiB orphan modules 520 KiB [orphan] 263 modules runtime modules 1010 bytes 5 modules code generated modules 835 KiB (javascript) 718 bytes (css/mini-extract) [code generated] modules by path ./node_modules/lodash/*.js 114 KiB 157 modules modules by path ./node_modules/reactcss/lib/ 12.8 KiB 7 modules modules by path ./node_modules/prop-types/ 2.58 KiB 3 modules modules by path ./src/ 520 KiB (javascript) 718 bytes (css/mini-extract) 2 modules modules by path ./node_modules/react/ 6.48 KiB 2 modules modules by path ./node_modules/react-dom/ 119 KiB 2 modules modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules modules by path ./node_modules/@icons/material/*.js 3.18 KiB 2 modules modules by path ./node_modules/react-is/ 2.69 KiB ./node_modules/react-is/index.js 196 bytes [built] [code generated] ./node_modules/react-is/cjs/react-is.production.min.js 2.49 KiB [built] [code generated] WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: prod-bundle.js (354 KiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (355 KiB) mib-colors.css prod-bundle.js WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/ webpack 5.30.0 compiled with 3 warnings in 48026 ms Done in 52.70s. xavier@server:.../mib-colors$ |
Le fichier javascript fait 354 ko et le fichier css 719 o. Cela dépasse, semble-t-il, les réglages par défaut de Webpack. La compilation prend quand même 52 s. Pour éviter de déclencher ces avertissements warnings, on peut ajouter l’entrée performance dans le fichier prod.config.js et relever la taille minimum à 512ko :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'prod-bundle.js' }, performance: { hints: false, maxEntrypointSize: 512000, maxAssetSize: 512000 }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.scss$/, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { sourceMap: false } }, { loader: 'sass-loader', options: { sourceMap: false } } ] } ] }, resolve: { extensions: ['.js', '.scss'] }, mode: 'production', plugins: [ new HtmlWebPackPlugin({ template: './src/index.html' //source html }), new MiniCssExtractPlugin({ filename: 'mib-colors.css', chunkFilename: 'mib-colors-chunk.css' }) ] } |
La compilation donne :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
xavier@sserver:.../mib-colors$ yarn build:prod yarn run v1.22.10 $ webpack --config prod.config.js asset prod-bundle.js 354 KiB [compared for emit] [minimized] (name: main) 1 related asset asset mib-colors.css 675 bytes [emitted] (name: main) asset index.html 459 bytes [compared for emit] Entrypoint main 355 KiB = mib-colors.css 675 bytes prod-bundle.js 354 KiB orphan modules 520 KiB [orphan] 263 modules runtime modules 1010 bytes 5 modules code generated modules 835 KiB (javascript) 674 bytes (css/mini-extract) [code generated] modules by path ./node_modules/lodash/*.js 114 KiB 157 modules modules by path ./node_modules/reactcss/lib/ 12.8 KiB 7 modules modules by path ./node_modules/prop-types/ 2.58 KiB 3 modules modules by path ./src/ 520 KiB (javascript) 674 bytes (css/mini-extract) 2 modules modules by path ./node_modules/react/ 6.48 KiB 2 modules modules by path ./node_modules/react-dom/ 119 KiB 2 modules modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules modules by path ./node_modules/@icons/material/*.js 3.18 KiB 2 modules modules by path ./node_modules/react-is/ 2.69 KiB ./node_modules/react-is/index.js 196 bytes [built] [code generated] ./node_modules/react-is/cjs/react-is.production.min.js 2.49 KiB [built] [code generated] webpack 5.30.0 compiled successfully in 41094 ms Done in 44.97s. |
Pour intégrer cela dans une page existante, il faut embarquer les fichiers mib-colors.css et prod-bundle.js, et créer une division <div> vide avec l’identifiant root.
Et hop, des color pickers pour choisir les couleurs.
