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

Posted 2023-02-22

【中文标题】在 Webpack + VueJs 中链接样式表和要求它们有啥区别？

【英文标题】：What is the difference between linking stylesheets and requiring them in Webpack + VueJs?在 Webpack + VueJs 中链接样式表和要求它们有什么区别？

【发布时间】：2017-08-28 21:09:58

【问题描述】：

使用 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 的优势（除非我猜每个组件都在本地工作？）。使用其中一个有什么优势吗？

【参考方案1】：

要求方法：

由 webpack 捆绑 某些库可能无法开箱即用，可能需要额外配置 您可以执行各种技巧，例如将所有 CSS 提取到一个文件中 您可以决定不将它们拆分为单独的文件，您可以将所有 CSS 和 JS 放在一个文件中（非常方便的开发设置） webpack 可以将图片内嵌到 CSS 中，然后再到 JS 中 CSS 的热重载应该在这种方法中工作（对库没有用） 像库这样的大 CSS 会使 webpack 开发服务器运行缓慢，因为它每次都必须重新构建它们

链接方法：

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

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

【讨论】：

感谢您的深入解答

【参考方案2】：

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

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

【讨论】：

我不确定它是否比从任何 CDN 提供库更快。也许使用适当的名称散列+缓存如果也可能很快。

感谢您的澄清:)