Performance Analysis & Optimization
- go into the
perf-tips/js-best-practices - make a branch
answer/yourname - make a folder under js-best-practices
- name the folder with your name. ex)
jangkeehyo - create a file named
answer.jsand answer the questions - make a pull request to the master
- go into
gzip-nodejsfolder - run these commands in order
npm install
node server.js
- check out how Gzip works in the web resources
- Install gulp global
npm i -g gulp
- Create a package.json
npm init
- Create a gulpfile.js
- Install node modules using the command below
npm install
Example 5 - Google Starter Kit
- Install webpack global
npm i webpack -g- create a package json file
npm init -y
- create index.js & index.html
<!-- index.html -->
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>// index.js
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());- add the contents below into the file
// index.js
// import & export is ES6 that doesn't work in the browser
// but webpack would replace them with compatible wrapper code
+ import _ from 'lodash';- <script src="https://unpkg.com/[email protected]"></script>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script>- run this command
webpack app/index.js dist/bundle.jsand start the index.html
Hello webpack- Let's add config file for more complex configuration
// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};- As for CSS files, use
css-loaderfor default setting. The extra optionExtractTextWebpackPluginis available for better performance
npm i css-loader style-loader --save-dev
npm i extract-text-webpack-plugin --save-dev
- When using a couple of libraries, should you import them at the very beginning of bundling all files to avoid repetitively use them in every build.
npm install --save moment
npm install --save lodash
npm i webpack-manifest-plugin --save-dev
- Initial development setting to make the build process easier
npm install --save-dev webpack-dev-server
webpack-dev-server --open
- or add this option to
package.jsonto launch the dev server
"scripts": { "start": "webpack-dev-server" }- TBD