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

Question

使用 VueJs 和 Webpack 组合，我发现要包含外部样式表（例如引导程序），您可以做以下两件事之一：

在您的主 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 的热重载应该在这种方法中工作（对库没有用）
• 像库这样的大 CSS 会使 webpack 开发服务器运行缓慢，因为它每次都必须重新构建它们

链接方法：

• webpack 未触及
• 可以从外部 CDN 提供，前提是您不需要从服务器提供服务
• 不灵活
• 效果很好

Webpack 方法为您提供了更多的灵活性和可能性——它非常适合您的代码。我认为我的经验法则是，如果您不必捆绑库，除非有理由这样做，因为您需要支付构建时间和有时额外的配置。

Answer 2

第一种，样式表被webpack打包到浏览器下载的文件中，第二种，浏览器直接从服务器获取样式表。

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