首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack+vue 之抽离 CSS 的正确姿势

导语

最近做了个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再抽离单独加载也是一个不错的注意。

不过怎么做效果好,还是要实际测试一下。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180109A0HJ8S00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券