webpack - 如何使用代码拆分在 Vue/Webpack webapp 中部分加载 Sass/样式表文件

Question

我在使用 Vue 2 和 Webpack 3 构建的 Web 应用程序中使用代码拆分技术。JS block 以异步方式运行良好，让我在 Lighthouse 性能审核中获得了高分.

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

我尝试从“.vue”单文件组件加载组件样式表，但我遇到了另一个问题:因为 Webpack 在主 App.vue 文件之前解析这些文件我导入了我的 main.scss，整个代码中使用的所有 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 block 一样？

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

Answer 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 变量、字体、mixins、响应式样式、表单等。
• 我删除了 App.vue 中 main.scss 文件的常规导入，这会自动删除 app.js block 中的 700 KB 巨大负载。<
• 最后，在每个路由/ View 模板上，我以以下形式添加了相应的组件样式表:

<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。 我期待在其他环境中部署它以获得更多统计信息，其中配置了更多调整，但它看起来确实是一个非常有前途的解决方案。