如何通过代码拆分在 Vue/Webpack webapp 中部分加载 Sass/样式表文件答案

【问题标题】：How to partially load Sass/stylesheet files in a Vue/Webpack webapp with code-splitting如何通过代码拆分在 Vue/Webpack webapp 中部分加载 Sass/样式表文件
【发布时间】：2019-06-20 02:08:27
【问题描述】：

我正在为使用 Vue 2 和 Webpack 3 构建的 Web 应用程序使用 代码拆分 技术。JS 块以异步方式运行良好，在 Lighthouse 性能审计中给了我一个很好的分数.

但是，通过打开 DevTools 上的“Coverage”选项卡，我可以看到我的大约 99% 的 CSS 样式在第一次内容绘制时没有使用（即第一个页面加载）。原因很简单：我的main.scss 文件（如下所示）导入了项目的所有样式表，创建了一大块渲染阻塞代码。我为 Sass 文件遵循了一个通用的、流行的设计模式，但显然它不适合 Vue 使用的基于组件的模式。

我尝试从“.vue”单文件组件加载组件样式表，但我遇到了另一个问题：因为 Webpack 在我导入我的 main.scss 的主要 App.vue 文件之前解析这些文件，整个代码中使用的所有 Sass 变量都“未声明”，因此到处抛出错误。

我的main.scss 文件看起来有点像这样：

//base style
@import 'base/variables';
@import 'base/fonts';
@import 'base/tools';
@import 'base/typography';
@import 'base/general';
@import 'base/buttons';
@import 'base/elements';
// ...

//components style
@import 'components/topnav';
@import 'components/header';
@import 'components/sidemenu';
@import 'components/footer';
@import 'components/login';
// ...

//responsiveness
@import 'base/responsiveness';
// cross browser styles
@import 'base/cross-browser';

有没有办法拆分这个大文件并相应地异步加载样式，仅在需要时才加载样式，就像其他 JS 块一样？

我不相信有一些特殊的 Webpack 加载器/插件可以为我做到这一点，我正在寻找一种重构最少的解决方案。整个磨难将我的交互时间指标增加到大约 6-7 秒。

【问题讨论】：

也许不要使用全局 scss 变量并将您的样式放在 .vue 文件中....任何您包装在单个文件组件中的内容都可以轻松进行代码拆分，因为 Webpack 可以创建拆分当它导入一个模块时，Vue 很乐意异步加载一个组件

标签： webpack sass vuejs2 code-splitting

【解决方案1】：

所以：在一些失败和错误之后，在找到 this page on vue-loader's docs 之后，我想我找到了一个合理的解决方案，分解如下：

确保已安装 sass-loader 和 node-sass
按照文档中的建议，在上面的链接中编辑常规 Webpack 配置。例如，为了包含 SASS 变量文件或您可能想要的任何其他通用样式表（main.scss...），您可以这样做：

         {
            loader: 'sass-loader',
            options: {
              data: `path/to/_variables.scss`,
              includePaths:[__dirname, 'src']
            }
          }

接下来，我分解了 main.scss 文件：只留下了基本样式的导入，例如 Sass 变量、字体、mixin、响应式样式、表单等。
我删除了 App.vue 中 main.scss 文件的常规导入，这会自动删除 app.js 块中巨大的 700 KB 负载。
最后，在每个路由/视图模板上，我添加了对应的组件样式表，形式如下：

<style lang="scss" scoped>
@import 'path/to/main.scss';  // **IF YOU HAVE `vue-cli` VERSION > 3.X, THEN YOU DON'T HAVE TO IMPORT GENERAL STYLE SHEETS SUCH AS THIS**
@import 'path/to/component/component.scss';
...
</style>

导入主样式表文件不是问题的原因，是因为它是非阻塞代码，保持执行线程继续运行 - 与之前巨大的样式表阻塞线程和将页面留空太久。显然，Vue 在其自己的 .vue 文件中对代码拆分的开箱即用支持使所有这些“合法”且超快。

结果？

初始页面加载时间（惊人地）低于 1.5 秒（为 4.5-6），因为 Lighthouse 性能得分达到了 95-97 的稳定范围...在开发环境中，我什至没有启用 JS 或文字压缩！此前，比分是45-55左右。我期待在其他环境中部署它以获得更多统计数据，其中配置了更多调整，但它看起来确实是一个非常有前途的解决方案。

【讨论】：