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

导语

最近做了个webpack+vue的项目,发现打包后的页面体积有点超出预期的大。为了减少请求量, 页面的js和css都是内联在html里面的,查看生成的html代码后发现,异步引入的vue模块中的css 也被打在了页面上面。页面体积可是影响加载速度的关键,赶紧google后解决了这个问题。这里记录下。

大部分使用过webpack的朋友都知道,抽离css需要使用到webpack的插件extract-text-webpack-plugin,vue也不例外。官方给的vue-loader的文档里面有这样的描述

module: {
          rules: [
            {     //处理js中引入的css
                  test: /\.css$/,
                  loader: ExtractTextPlugin.extract({
                      use: [
                          {
                              loader: 'css-loader'
                          }
                      ]
                  })
              },
              {
                  test: /\.vue$/,
                  loader: 'vue-loader',
                  options: {loaders:{
                      css: ExtractTextPlugin.extract({
                          use: 'css-loader',
                          fallback: 'vue-style-loader'
                      })
                  }}
              }
          ]
        },
plugins: [ //这个不添加allChunks参数的话,不会抽离chunk的css
new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true})
]

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。就像这样

module: {
          rules: [
           {
        test: /\.css$/,
        include: [path.resolve(__dirname, "../src/page/"),
        loader: ExtractTextPlugin.extract({
        use: [
        {
            loader: 'css-loader'
                }
        ]
        })
       },
       {
        test: /\.css$/,
        include: path.resolve(__dirname, "../src/components/"),
        loader: ['style-loader','css-loader']
      },
             {
                  test: /\.vue$/,
                  loader: 'vue-loader',
                  options: {loaders:{
                      css: ExtractTextPlugin.extract({
                          use: 'css-loader',
                          fallback: 'vue-style-loader'
                      })
                  }}
              }
          ]
        },
plugins: [ //这个不添加allChunks参数的话,不会抽离chunk的css
new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true})
]

这里配置对page目录下的代码,抽离出css,对components里面引用的代码,内联在js里面。

这样异步加载components的css就不会被打包到首屏的html里面了,页面体积减少,加载速度自然

就上去了。

下面附修改前后的对比。

修改前

修改后

很明显,修改后html的体积变小了,然而值得注意的是,修改后html+js的体积大于修改前,

这是因为css在js里面保存,需要更多的字符去表示,所以总体积变大了。把chunkjs里面的css

把chunkjs里面的css再抽离单独加载也是一个不错的注意。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏武军超python专栏

2018年8月14日TCP网络编程及具体代码

静态文件?顾名思义,静态文件就是那些不会改变的文件,例如视频音乐,图片等类似的文件 NT平台:指的是windows NT操作系统,是windows在199...

904
来自专栏岑玉海

Hbase 学习(六) 配置文件调优

这部分的内容,网上多了去了,都大同小异的,仅作为备忘录,省得需要的时候又要到处查。 1.zookeeper.session.timeout 默认3分钟,...

2786
来自专栏jeremy的技术点滴

重新理解HTTP中的“持久连接”

4004
来自专栏技术之路

go微服务框架go-micro深度学习(一) 整体架构介绍

      产品嘴里的一个小项目,从立项到开发上线,随着时间和需求的不断激增,会越来越复杂,变成一个大项目,如果前期项目架构没设计的不好,代码会越来越臃肿,难以...

4693
来自专栏Jackson0714

不惧面试:HTTP协议(1) - 基础扫盲

2877
来自专栏北京马哥教育

varnish学习总结

什么是web cache? Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在与Web服务器和客户端(浏览器)直接的副本。缓存会根据进来...

2975
来自专栏大学生计算机视觉学习DeepLearning

c++ 网络编程(二)TCP/IP linux 下多进程socket通信 多个客户端与单个服务端交互代码实现回声服务器

原文链接:https://www.cnblogs.com/DOMLX/p/9612820.html

1578
来自专栏SDNLAB

OpenDaylight ping模块开发及分析

编者按:OpenDaylight ping模块开发及当ping操作触发数据流,对其进行分析及流程原理的疏通讲解,并在开发过程中遇到的问题进行总结,希望给大家能够...

3346
来自专栏散尽浮华

DNS之BIND使用小结(Forward转发)

之前详细介绍了DNS及其在linux下的部署过程,今天再说下DNS的BIND高级特性-forwarder转发功能。比如下面一个案例: 1)已经在测试环境下部署了...

3103
来自专栏程序员宝库

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我...

1823

扫码关注云+社区