h5有缓存css,taro H5配置 cdn css js 缓存 hash 配置
1.taro使用详情请参考本https://nervjs.github.io/taro/docs搭建
2.关于文件的配置,在config/index.js添加相关配置
使得pages下面对应的文件夹可以使用对应的文件名而不是index.js,例如home.js
使得src下面的文件引用可以采用'@utils/jump'的引用方式(包括action,reducer,utils,styles等文件夹下的文件引用)
const path = require('path')
const sassImportor = function(url) {
const reg = /^@styles\/(.*)/
return {
file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url
}
}
const config = {
projectName: 'gant-taro',
date: '2019-2-26',
designWidth: 750,
deviceRatio: {
'640': 2.34 / 2,
'750': 1,
'828': 1.81 / 2
},
sourceRoot: 'src',
outputRoot: 'dist',
plugins: {
babel: {
sourceMap: true,
presets: [
['env', {
modules: false
}]
],
plugins: [
'transform-decorators-legacy',
'transform-class-properties',
'transform-object-rest-spread'
]
},
sass: {
importer: sassImportor
}
},
defineConstants: {
},
alias: {
'@actions': path.resolve(__dirname, '..', 'src/actions'),
'@assets': path.resolve(__dirname, '..', 'src/assets'),
'@components': path.resolve(__dirname, '..', 'src/components'),
'@constants': path.resolve(__dirname, '..', 'src/constants'),
'@reducers': path.resolve(__dirname, '..', 'src/reducers'),
'@styles': path.resolve(__dirname, '..', 'src/styles'),
'@utils': path.resolve(__dirname, '..', 'src/utils')
},
copy: {
patterns: [
],
options: {
}
},
weapp: {
module: {
postcss: {
autoprefixer: {
enable: true,
config: {
browsers: [
'last 3 versions',
'Android >= 4.1',
'ios >= 8'
]
}
},
pxtransform: {
enable: true,
config: {
}
},
url: {
enable: true,
config: {
limit: 10240 // 设定转换尺寸上限
}
},
cssModules: {
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
},
h5: {
publicPath: '/',
staticDirectory: 'static',
output: {
filename: 'js/[name].[hash].js',
chunkFilename: 'js/[name].[chunkhash].js'
},
imageUrlLoaderOption: {
limit: 5000,
name: 'static/images/[name].[hash].[ext]'
},
miniCssExtractPluginOption: {
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[name].[chunkhash].css',
},
module: {
postcss: {
autoprefixer: {
enable: true,
config: {
browsers: [
'last 3 versions',
'Android >= 4.1',
'ios >= 8'
]
}
},
cssModules: {
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
},
sassLoaderOption: {
importer: sassImportor
}
}
}
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
}
return merge({}, config, require('./prod'))
}
3.由于antd只以h5和rn为端应用,taro面向的还有微信 支付宝 头条等等 ,所以说taro提供了taro-ui这个统一框架
详情请参考https://taro-ui.aotu.io/#/docs/introduction
作者:有风吹是幸福的
链接:https://www.jianshu.com/p/cbd78616c0a9
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
h5有缓存css,taro H5配置 cdn css js 缓存 hash 配置相关推荐
- vue-cli 没有build如何配置_webpack4配置实现浏览器长期缓存
前言 webpack是目前十分火热的模块化打包工具,给我们前端在实现工程化方面提供了极大的帮助.webpack在社区中成长,又从社区中吸收各种优秀的配置方式.集成于自身,将社区中优秀的配置置于内部中, ...
- 简述回源原理和CDN常见多级缓存
一.CDN回源 1.回源原理 源站内容有更新的时候,源站主动把内容推送到CDN节点. 常规的CDN都是回源的.即:当有用户访问某一个URL的时候,如果被解析到的那个CDN节点没有缓存响应的内容,或者是 ...
- cdn节点人少延迟高_如何正确配置CDN高速缓存,避免越用越慢的尴尬
越来越多的博客网站开始用到了国内的免费CDN了,比如百度云加速.360网站卫士.加速乐及云盾等等.之前我也写文章分享过国内低配置VPS的优化方案,其中提到了很多站长开启CDN加速后反而更慢的问题. 文 ...
- 使用html2canvas,将页面转换成图片的采坑记录(Web/Taro h5)
使用html2canvas将页面转换成图片的采坑记录 "html2canvas": "^1.4.1","@tarojs/taro": &qu ...
- 代码体积减少80%!Taro H5转换与优化升级
前言 作为一个多端开发框架,Taro 从项目发起时就已经支持编译到 H5 端.随着 Taro 多端能力的不断成熟,我们对 Taro H5 端应用的要求也不断提升.我们已经不再满足于"能跑&q ...
- H5获取公众号的用户信息和redirect_uri域名与后台配置不一致10003
公众号H5获取用户信息 1.踩坑 2.配置JS接口安全域名和OAuth2.0网页授权 3.redirect_uri 4.redirect_uri域名与后台配置不一致10003 1.踩坑 这里帮大家踩个 ...
- kangle配置cdn_缓存 Kangle部署多节点CDN _好机友
CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...
- 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(CSS字体,文本)
一.基础班学习路线 三.CSS3基础 1.CSS简介 CSS是 层叠样式表 的 简称,有时也称为 CSS样式表 ,级联样式表 也是一种标记语言 CSS主要用于设置HTML页面中的文本内容,图片的外形以 ...
- 为什么你做的H5开屏那么慢?H5首屏秒开方案探讨
越来越多的APP内业务使用H5的方式实现,怎样让H5页面启动更快是很多人在探索的技术点,本文梳理了启动过程中的各个点,分别从前端和客户端角度去探讨有哪些优化方案,供大家参考. 随着移动设备性能不断增强 ...
最新文章
- 备份与恢复oracle,oracle 备份与恢复
- [转帖]一位“鬼佬”总经理的管理艺术
- 信而泰推出100G多速率测试模块:填补中国通信产业链短板
- 乐安全 支持x86_国产EDA又进一步!芯华章发布全新仿真技术:x86、ARM等架构通吃...
- Linux日志系统-07:案例3-rsyslog+logrotate实现SSH的日志滚动
- 从零写一个编译器(完结):总结和系列索引
- UVA 10588—— Queuing at the doctors
- sublime运行python代码_怎么用sublime运行python
- 数值分析方程求根实验matlab,数值分析实验之非线性方程求根(MATLAB实现)
- Ubuntu 下PySpark安装
- Java 里面 final 与 static
- 最大子串和 python_5. 最长回文子串(Python)
- 最新款电影程序源码 影院网站源码 在线采集多资源播放器去广告
- 外泌体,顶刊新宠丨一文 get 研究套路!
- 8个美白小锦囊 不知不觉中白起来
- python存根文件_python中的函数存根
- java-net-php-python-java宿舍管理系统计算机毕业设计程序
- 纯CSS实现对话气泡(MD.5)
- win,linux双系统开机引导修复
- python怎么写游戏脚本_用PYTHON做一个简单的游戏脚本(基础,详细)