The format in which the language exists
- js — .js .jsx .coffee .ts(Typescript)
- css –.css .less .sass .scss
- Image — .jpg .png .gif .bmp .svg
- Font file –.svg.ttf.ect. Woff.woff2
- The template file –.ejs.jade.vue
The problem when too many static files in a web page
- 1. Slow loading of web pages. Because making a secondary request (e.g., meeting SRC, etc.)
- 2. To handle complex dependencies (bootstrap depends on jQuery)
The solution
- 1. Merge, compress, Sprite image (image into one image, request once), image conversion to Base64 (disadvantage: tend to small image)
- You can use requiredJS or WebPack to resolve complex dependencies between packages.
webpack
Based on node.js developed out of the front-end tools, Webpack is a front-end project construction tool.
Compare the two approaches using the solution
- Gulp: Based on task. There are multiple components, based on function points.
- Webpack: Is based on the entire project
Webpack website
webpack.js.org