导语
最近做了个webpack+vue的项目,发现打包后的页面体积有点超出预期的大。为了减少请求量, 页面的js和css都是内联在html里面的,查看生成的html代码后发现,异步引入的vue模块中的css 也被打在了页面上面。页面体积可是影响加载速度的关键,赶紧google后解决了这个问题。这里记录下。
大部分使用过webpack的朋友都知道,抽离css需要使用到webpack的插件extract-text-webpack-plugin,vue也不例外。官方给的vue-loader的文档里面有这样的描述
OK,这样打包后,我们把每个entry里面使用到的css代码都单独打包出来了,这时候可以选择
使用html-webpack-plugin生成带css 链接的html,也可以使用html-webpack-inline-source-
plugin把css内联到html里面(减少请求数量,在移动端很有用)
然而会发现,异步引入的vue文件里面import的css,也会被抽离出来,打包内联到html里面,
怎么解决这个问题呢。其实很简单,就是使用loader的include参数,指定loader的作用文件夹,
对不想抽离css的文件,使用style-loader和css-loader。就像这样
这里配置对page目录下的代码,抽离出css,对components里面引用的代码,内联在js里面。
这样异步加载components的css就不会被打包到首屏的html里面了,页面体积减少,加载速度自然
就上去了。
下面附修改前后的对比。
修改前
修改后
很明显,修改后html的体积变小了,然而值得注意的是,修改后html+js的体积大于修改前,
这是因为css在js里面保存,需要更多的字符去表示,所以总体积变大了。把chunkjs里面的css
把chunkjs里面的css再抽离单独加载也是一个不错的注意。
不过怎么做效果好,还是要实际测试一下。
领取专属 10元无门槛券
私享最新 技术干货