我有一个使用vue.js开发的应用程序,使用webpack进行打包。我使用vue-server-renderer
在服务器端渲染它。一切都很顺利。在我的webpack配置中,我使用了ExtractTextPlugin
:
new ExtractTextPlugin({
filename: `css/[name]${isProduction ? '.[hash]' : ''}.css`,
allChunks: true
})
如果我使用
allChunks: true
,那么我会得到一个单一的CSS文件,一切都正常。但是在一个大型应用程序中,这并不理想。现在我有一堆CSS被加载了,但在页面上没有被使用。如果我设置
allChunks: false
,那么我会得到一个较小的初始文件,并且当前组件的CSS会在页面加载时注入到头部。这几乎是我想要的。但是问题在于,如果您正在使用SSR,则会在页面中获取没有CSS的初始HTML,然后当CSS加载时,所有内容会正确呈现。我希望在我的SSR渲染函数中,我可以访问当前页面的CSS,并在返回给浏览器之前将其注入到头部。
我尝试构建webpack加载器,但我认为这不是正确的方法,并且我在与
css-loader
集成方面遇到了问题。我认为这应该是
vue-loader
或vue-server-renderer
的问题。不太确定接下来该怎么做。所以我想寻求一些指导,是否有其他人解决了这个问题,或者可以指引我走向正确的方向。