Skip to content
Example how you can tune your application code AND webpack configuration to create lazy loading modules as well as smaller chunks. Uses contrived example using D3, OpenLayers, MomentJS, Lodash etc to demonstrate the point.
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
build
config
src
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
README.md
index.html
package.json

README.md

webpack-tuning

A Vue.js project (using webpack template) customized to showcase various tuning opportunities.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production and view the bundle analyzer report
npm run build --report

See the differences in webpack bundles

After cloning the repo, checkout the un-tuned version

git checkout unoptimized
# run the app & check network tab for file sizes
npm run dev 
# build the report
npm run build --report

Then checkout the tuned version

git checkout optimized
# run the app & check network tab for file sizes
npm run dev 
# build the report
npm run build --report
You can’t perform that action at this time.