如何在Vue/Webpack webapp应用程序中部分加载Sass/样式表文件并进行代码拆分
我在用Vue 2和Webpack 3构建的web应用程序中使用了code-splitting技术。JS块在异步方式下运行良好，在灯塔性能审核方面给了我一个很好的分数。
但是，通过在DevTools上打开“”选项卡，我可以看到大约99%的样式在第一个内容的(即第一个页面加载)中未使用。原因很简单:我的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块一样，只有在需要时才能这样做？
我不相信有一些特殊的Webpack加载程序/插件会为我做到这一点，我正在寻找一个解决方案与最少的重构要做。整个考验将我的互动时间增加到6-7秒左右。
回答 1
Stack Overflow用户
发布于 2019-03-26 23:56:38
因此:在一些失败和错误之后，在找到这一页在vue-加载程序的文档中之后，我认为我找到了一个可行的解决方案，具体如下：
- 确保安装了
sass-loader和node-sass - 按照文档中的建议，在上面的链接中编辑一般Webpack配置。在这里，为了包括SASS变量文件，例如，或者任何其他您可能需要的通用样式表(main.scss.)，您可以这样做：
{
loader: 'sass-loader',
options: {
data: `path/to/_variables.scss`,
includePaths:[__dirname, 'src']
}
}- 接下来，我详细分析了
main.scss文件:只留下了基本样式的导入，例如Sass变量、字体、混合体、响应样式、表单等等。 - 我删除了
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)，因为灯塔的性能得分达到了一个坚实的范围95-97.在开发环境中，我甚至还没有启用JS或文本压缩！以前，比分在45比55之间.我期待着将它部署到其他环境中，以获得更多的统计数据，其中配置了更多的调优，但它确实是一个非常有希望的解决方案。
https://stackoverflow.com/questions/54378843
复制相似问题
腾讯云开发者
