Question

我正在为使用Vue 2和Webpack 3构建的Web应用程序使用代码拆分技术。JS块以异步方式很好地工作，在Lighthouse性能审核中获得了不错的成绩

但是，通过打开DevTools上的“覆盖”标签，我可以看到约有99％的CSS样式在第一个内容丰富的绘画上未使用（即，第一页加载）。原因很简单：我的main.scss文件（如下所示）导入了项目的所有样式表，从而创建了大量的渲染阻止代码。我遵循了Sass文件的通用流行设计模式，但是显然，它与Vue使用的基于组件的模式不太匹配。

我试图从'.vue'单文件组件中加载组件样式表，但是又遇到了另一个问题：因为Webpack在导入{{ 1}}，整个代码中使用的所有Sass变量都会“未声明”，从而到处引发错误。

我的App.vue文件看起来像这样：

main.scss

是否有一种方法可以拆分大文件并相应地异步加载样式（仅在需要时才与其他JS块一样）？

我不相信有什么特殊的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变量，字体，mixin，响应样式，表单等。
我删除了main.scss中App.vue文件的常规导入，这自动删除了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。我期待将其部署到其他环境中，以获取更多统计信息，其中配置了更多的调整功能，但它确实是一个非常有前途的解决方案。

如何通过代码拆分在Vue / Webpack Web应用程序中部分加载Sass /样式表文件

1 个答案:

结果？