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

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

但是，通过打开DevTools上的“Coverage”选项卡，我可以看到我的CSS样式中有99%在第一次内容绘制（即第一次页面加载）时没有使用。原因很简单：我的

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块一样？

---

我不相信有什么特殊的网页包加载程序/插件可以为我做到这一点，我正在寻找一个重构最少的解决方案。整个考验将我的交互度量时间增加到了6-7秒。

因此：在一些失败和错误之后，在找到一个合理的解决方案之后，我认为我找到了一个可行的解决方案，具体如下：

• 确保安装了

  sass加载程序

  和

  node sass

• 按照上述链接中文档中的建议编辑常规网页配置。在这里，为了包括SASS变量文件，例如，或您可能需要的任何其他常规样式表（main.scss…），您可以执行以下操作：

• 接下来，我分解了

  main.scss

  文件：只剩下基本样式的导入，例如Sass变量、字体、混合、响应样式、表单等等
• 我删除了

  App.vue

  中通常导入的

  main.scss

  文件，该文件自动删除了App.js块中巨大的700 KB负载
• 最后，在每个路由/视图模板上，我以以下形式添加了相应的组件样式表：

@导入'path/to/main.scss'；//**如果您有'vue cli`VERSION>3.X，则不必导入这样的常规样式表**
@导入'path/to/component/component.scss'；
...

导入主样式表文件不是一个问题的原因是，它是非阻塞代码，保持执行线程运行-与以前大样式表阻塞线程并使页面空白太久的情况不同。显然，Vue在其自己的.Vue文件中对代码拆分的开箱即用支持，使所有这些都“合法”且超快速

结果？ 最初的页面加载（令人惊讶地）不到1.5秒（4.5-6），因为灯塔性能分数达到了95-97的稳定范围。。。在开发环境中，我甚至还没有启用JS或文本压缩！此前，比分约为45-55。

---

我期待着在其他环境中部署它，以获得更多的统计数据，在这些环境中配置了更多的调优，但它看起来确实是一个非常有希望的解决方案。

也许不要使用全局

scss

变量，而将您的样式放在

.vue

文件中。。。。在单个文件组件中封装的任何内容都可以很容易地进行代码拆分，因为Webpack在导入模块时可以创建拆分点，Vue很乐意异步加载组件

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

<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>