在Webpack + VueJs中链接样式表和要求它们有什么区别？

Question

使用VueJs和Webpack组合我已经想到要包含外部样式表（例如bootstrap），你可以做以下两件事之一：

在你的主js脚本中你可能需要这样的样式表：

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

或者您只需将其移动到通过Express访问的静态文件夹并将其链接到您的主html文件中：

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

这两种方法有什么区别？我不太清楚在链接上使用require的优势（除非我认为每个组件在本地工作？）。使用一个优于另一个是否有任何优势？

Answer 1

需要方法：

• 由webpack捆绑
• 某些库可能无法开箱即用，可能需要额外配置
• 您可以执行各种操作，例如将所有CSS解压缩到一个文件
• 您可以决定不将它们拆分为单独的文件，您可以将所有CSS和JS放在一个文件中（非常方便的开发设置）
• webpack可以将图像内嵌到CSS中，然后插入JS
• 热重新加载CSS应该适用于这种方法（对库来说没用）
• 像lib这样的大CSS让webpack dev服务器工作得很慢，因为每次都必须重建它们

链接方法：

• 没有被webpack接触
• 可以从外部CDN提供，条件是您不需要从服务器提供服务
• 不灵活
• 它只是工作

Webpack方法为您提供了更多的灵活性和可能性 - 它对您的代码非常有用。我认为我的经验法则不是捆绑图书馆，如果你不必这样做，除非你有理由这样做，因为你付出的是建造时间，有时需要额外的配置。

Answer 2

首先，样式表由webpack捆绑到浏览器下载的文件中，第二种，浏览器直接从服务器检索样式表。

使用webpack的require版本捆绑您的样式表，确保在一个请求中将它们下载到浏览器（以及您的页面需要呈现的所有其他资源），而不是单独下载它们服务器请求。这样可以减少网络流量并加快页面呈现速度。