-----------------------------------------------11.26---------------------------------------------
如今的网页的性能问题会很大程度地影响你的产品质量,已经从产品发布才开始解决的问题变成开发阶段就需要关注的问题,因为这大大关系了用户体验。
- 根据这个报告显示,平均每个用户打开网页是希望能在4秒内加载出来,超过40%的用户在加载超过3秒后会选择关闭该页面。
什么是打包大小?
在理解什么是打包大小之前,我们应该先了解什么是打包
打包就是各种打包工具(比如webpack,parcel,snowpack)将所有不同的资源文件HTML文件,CSS文件,Javascript文件,图片文件整合起来并产生一个更小的文件的过程。打包是减少HTTP请求并展示服务器内容给用户的必要过程。
打包大小就是最后产生的打包文件的大小,而这个大小恰恰影响着网页的加载速度。
这篇文章,我们会演示如何减少我们使用Tailwind CSS开发的网页的打包大小。我们还会学习如何使用PurgeCSS,并且如何在Vue中实现。
什么是Tailwind CSS?
这是一个用于设计网页的CSS库,相比其他库,没有提供任何预置的组件,只会提供给你一套CSS工具类添加到你的组件来设计样式
什么是PurgeCSS?
用于移除项目没有用到的样式,是专门用于优化Tailwind CSS打包大小的开发工具
安装并创建Vue的Tailwind项目
如果你已经安装Vue CLI脚手架,你可以通过vue create创建项目
首先运行命令:
vue create vue-tailwind
根据需要选择你需要的配置,然后进入项目目录:
cd vue-tailwind
运行项目:
yarn serve
or
npm run serve
然后你的项目就会运行在http://localhost:8080/上
安装依赖:
npm install tailwindcss postcss autoprefixer
然后在根目录下创建一个postcss.config.js,使用tailwindcss和autoprefixer插件
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
因为这篇文章介绍的是“如何在Vue中使用Tailwind CSS”,所以只介绍最简单的方式,直接在main.js入口文件中import即可:
import "tailwindcss/tailwind.css"
这时候再运行项目,如果报以下这个错误:
Error: PostCSS plugin tailwindcss requires PostCSS 8.
说明你下载了新版的tailwind,需要PostCSS 8支持,但即便你下载了PostCSS 8,你的项目框架可能也因为版本较老不支持PostCSS 8,需要卸载后重新安装兼容版本
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
这时候再运行项目估计就可以了
然后根据Tailwind官方文档给template随便加上你想要的样式
最后对项目进行打包:
yarn build
可以看到打包后的文件大小相当大,这还只是包含了默认基础样式的情况下
使用PurgeCSS压缩文件大小
为项目创建Tailwind的配置文件,用于自定义Tailwind配置
npx tailwindcss init
上面这行命令在项目根目录下创建了tailwind.config.js文件,文件中包含所有Tailwind的默认配置
在tailwind.config.js下进行以下配置:
purge: {
enabled: true,
content: [
'./src/**/*.vue',
'./public/**/*.html',
]
},
PurgeCSS会根据配置下的指定目录清理没有使用到的样式
执行以下命令进行最后的打包:
yarn style && yarn build
可以看到打包后文件小了很多