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 删除。

编辑于

我来说两句

5 条评论
登录 后参与评论

相关文章

来自专栏大闲人柴毛毛

Linux文件的默认权限与查找命令详解

今天被csdn坑了!昨晚写了一夜的博客,保存到线上草稿了!可是今天打开博客,草稿箱里也找不到,发布的文章中也找不到!作为一家专门研讨技术的网站,居然还会在技术上...

40416
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令八

我们开始学习Linux压缩和打包基础 tar 在Linux中,打包和压缩是分两步完成的 打包 打包是将多个文件归并到一个文件中 tar -cvf test.ta...

3395
来自专栏向治洪

gulp+webpack工具整合简介

webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 ? webpack...

1928
来自专栏用户2442861的专栏

每天一个linux命令(61):wget命令

http://www.cnblogs.com/peida/archive/2013/03/18/2965369.html

392
来自专栏从零开始学自动化测试

selenium+python自动化87-Chrome正在受到自动软件的控制

一、出现问题 1.用selenium启动浏览器出现‘Chrome正在受到自动软件的控制’ ? 2.如果不想看到这种讨厌的提示语,启动浏览器时候加个配置就行了 二...

2976
来自专栏木头编程 - moTzxx

Laravel+Layer 图片上传功能整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

742
来自专栏A周立SpringCloud

合并两个不相关的Git仓库

大致是这样的场景:有两个仓库,一个Git仓库,一个SVN仓库,都是非空的。现在要把SVN仓库中的内容合入Git仓库中,并保留提交记录。听起来有点奇怪,不过现实中...

2715
来自专栏杨建荣的学习笔记

个人的小项目mysql_mgr_test开放了

之前写了一版简单的shell脚本,能够实现简单的MySQL Group Replication环境的测试快速部署,大概就1分多钟的时间就快速创建多个实例节...

3455
来自专栏大闲人柴毛毛

Linux用户身份切换

为什么需要切换用户身份? 在日常工作中,尽量使用普通用户账号操作,当需要root权限的时候再通过身份切换的方式切换至root管理员,这样能保证系统的安全性。使...

3417
来自专栏西安-晁州

vue.js应用开发笔记

看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

2961

扫码关注云+社区