Melhorias e performance com Webpack

Talk para o JSSP

Transcript

1. CAIO INCAU @icaioincau @caioincau http://bit.ly/livrovuejs
2. OTIMIZAÇÕES COM WEBPACK
3. As otimizações podem ser separadas em 3 tópicos principais: DIMINUIR O TAMANHO DO FRONT Reduzir o tamanho dos arquivos servidos no Front-End MELHORIAS DE CACHE Melhores práticas de cache para evitar que a aplicação seja toda recarregada. MONITORAR E ANALISAR A APLICAÇÃO Monitoria previne que após aplicar as nossas otimizações, os problemas não voltem a ocorrer.
4. DIMINUIR O TAMANHO DOS ARQUIVOS NO FRONT-END
5. Minifique seu JS const webpack = require('webpack'); module.exports = { plugins: [ new webpack.optimize.UglifyJsPlugin(), ], };
6. Código que escrevemos import './comments.css'; export function render(data, target) { console.log('Rendered!'); }
7. Código compilado "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony export (immutable) */ __webpack_exports__["render"] = render; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__); function render(data, target) { console.log('Rendered!'); }
8. Código minificado // minified bundle.js (part of) "use strict";function t(e,n){console.log("Rendered!")} Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)
9. Minificando CSS module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { minimize: true } }], }, ], } };
10. LIGUE O NODE_ENV=production
11. Podemos usar o `webpack.DefinePlugin` para substituir as ocorrências de `process.env.NODE_ENV` para `'production'`
12. module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', }), new webpack.optimize.UglifyJsPlugin(), ], }; Como usar o DefinePlugin
13. VS CÓDIGO PURO CÓDIGO SUBSTÍTUDO if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; } if (process.env.NODE_ENV !== 'production') { warn('props use array syntax.'); } if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; } if ("production" !== 'production') { warn('props use array syntax.'); }
14. if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; } Código após Uglify
15. // comments.js export const render = () => { return 'Rendered!'; }; export const commentRestEndpoint = '/rest/comments'; // index.js import { render } from './comments.js'; render(); Use ES imports
16. (function(n,e){"use strict";var r=function() {return"Rendered!"};e.b=r}) Código desnecessário removido
17. module.exports = { module: { rules: [ { test: /\.(jpe?g|png|gif)$/, loader: 'url-loader', options: { limit: 10 * 1024, }, }], }}; Tratando imagens
18. LIB HELL
19. LIB HELL
20. module.exports = { plugins: [ new MomentLocalesPlugin({ localesToKeep: [‘en-us', ‘pt-br‘], }), ], }; Moment.js
21. import { chunk } from 'lodash-es'; console.log(chunk([1,2,3,4], 2)); Lodash
22. const webpack = require('webpack'); module.exports = { plugins: [ new webpack.optimize.ModuleConcatenationPlugin(), ], }; ES modules até na compilação
23. MELHORIAS DE CACHE
24. CHUNK HASH module.exports = { entry: './index.js', output: { filename: 'bundle.[chunkhash].js', // ! bundle.8e0d62a03.js }, };
25. VENDORS CHUNK module.exports = { plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: module => module.context && module.context.includes('node_modules'), }), ], };
26. LAZY LOADING onShowCommentsClick(() => { import('./comments').then((comments) => { comments.renderComments(); }); });
27. CODE SPLIT module.exports = { entry: { home: './src/Home/index.js', article: './src/Article/index.js', profile: './src/Profile/index.js' }, };
28. MONITORIA
29. WEBPACK DASHBOARD
30. WEBPACK DASHBOARD module.exports = { plugins: [ new DashboardPlugin() ], };
31. BUNDLE SIZE
32. BUNDLE SIZE npm install bundlesize --save-dev { "bundlesize": [ { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
33. WEBPACK BUNDLE ANALYZER
34. WEBPACK BUNDLE ANALYZER
35. WEBPACK BUNDLE ANALYZER npm install webpack-bundle-analyzer --save-dev const BundleAnalyzerPlugin = require('webpack-bundle- analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] };
36. Obrigado ;) @icaioincau @caioincau http://bit.ly/livrovuejs