VUE提取公共css踩小坑 之 动态加载组件
异步组件,如何提取VUE组件中的CSS成独立的.css文件
·
如何提取VUE组件中的CSS成独立的.css文件,官方文档里说的很清楚了,官方文档,提取 CSS 到单个文件,按文档测试,反复对比,打包后的结果始终是:
Asset Size Chunks Chunk Names
3f088e105cd24828c4d81390cf0d9522.png 25.5 kB [emitted]
0.js 18.3 kB 0 [emitted]
1.js 357 bytes 1 [emitted]
app.js 718 kB 2 [emitted] [big] app
index.html 182 bytes [emitted]
我的CSS文件呢!!!
为了查错,新起了一个配置文件,几乎把所有其他不相关的配置都删除了,可是始终还是这个结果~
左右思量,突然想起来是不是和组件的加载方式有关系,我的组件是采用异步加载的,如下:
const Hello_com = () => import('./components/hello.vue')
所以做一下修改,重新打包测试
//const Hello_com = () => import('./components/hello.vue')
import Hello_com from './components/hello.vue'
打包提示:
Asset Size Chunks Chunk Names
3f088e105cd24828c4d81390cf0d9522.png 25.5 kB [emitted]
0.js 357 bytes 0 [emitted]
app.js 725 kB 1 [emitted] [big] app
style.css 206 bytes 1 [emitted] app
index.html 222 bytes [emitted]
果然,亲切的css文件赫然在列~
VUE当采用异步加载组件的时候,打包时会把他这个组件里的所有代码都扔到一个js里,然后在需要时加载。
更多推荐
已为社区贡献1条内容
所有评论(0)