Clever Geek Handbook

What is the difference between binding stylesheets and requiring them in Webpack + VueJs?

Using VueJs and Webpack compilation, I realized that in order to include external stylesheets (like bootstrap) you can do one of two things:

In your main js script, you might need a stylesheet like:

require('./assets/lib/bootstrap.min.css');

Or you can just move it to a static folder accessible via Express and link it in your main html file:

<link rel="stylesheet" type="text/css" href="/static/css/lib/bootstrap.min.css">

What is the difference between these two approaches? I don't quite understand the benefits of using require by reference (if it doesn't work locally on a single component, I guess?). Are there advantages to using one over the other?

+3


source to share


2 answers


Require :

  • bundled with webpack
  • some libraries may not ship out of the box and may need additional configuration
  • you can do various tricks like extracting all of your CSS into one file.
  • OTH you can decide not to split them into a separate file, you can have all your CSS and JS in 1 file (very handy setup for development).
  • webpack can inline images in CSS and then in JS
  • hot CSS reload should work in this approach (not useful for libraries)
  • big CSS like libs makes webpack dev server slow as it has to rebuild them every time

Link :



  • didn't touch webpack
  • can be served from an external CDN, provided you don't need to serve it from your server.
  • not flexible
  • it just works

The Webpack approach gives you a lot of flexibility and power - it's very good for your code. I think my rule of thumb would be not to link libraries unless you need to, unless there is a reason to do so, since you pay with build time and sometimes additional configuration.

+5


source


In the first style sheet, it is inserted by a web folder into a file loaded by the browser, and in the second browser, it directly fetches the style sheet from the server.



By bundling your stylesheets with the webpack version require

, you are sure that they are loaded into the browser on a single request (along with all the other resources your page requires to render), instead of being loaded as a separate request to the server. This reduces network traffic and speeds up page rendering.

+2


source






More articles:


All Articles