前端
文章平均质量分 60
重复过往
小菜鸟一枚。37540004不是我的QQ,那是CSDN生成的ID。。。。
展开
-
记webpack3.x版本远古老项目编译优化实战
记webpack3.x版本远古老项目编译优化实战为何要优化?每次执行npm run dev 需要等待24~28s,每次ctrl + s触发热更新需要等待4~8s!叔可忍!婶婶不能忍!优化前的编译速度优化前的热更新速度实际只会比这些更慢!!!优化之后写代码又感到了人生的幸福!优化后的编译速度8s左右结束战斗!优化后的热更新速度秒更新 有木有!优化思路使用happypack来加快babel-loader编译速度首先 安装 happypack npm i原创 2021-03-18 10:13:28 · 2831 阅读 · 3 评论 -
记一次webpack5从0到1改造老项目的过程
记一次老项目添加webpack的过程目录结构改造前改造后为什么要改造?老项目痛点在哪里?老项目技术栈使用纯原生,需要兼容IE10,没有引入帮助插件老项目css与js没有通过postcss与babel进行转化 容易产生兼容错误老项目特殊需求静态资源如图片、图标、等需要打包到js文件中,每次新增都要自己转化,很麻烦老项目JS代码全冗杂在一起,不模块化,不够清晰。老项目与自动化打包构建工具合作不太方便老项目没有使用scss等css工具老项目没有使用eslint 也没有格式化代原创 2021-03-16 15:26:06 · 2600 阅读 · 0 评论 -
使用gltf-pipeline的draco压缩gltf报Draco encoding failed.
查阅这个issue得到了解答。glTF 2.0 model fails to compress with Draco compression简单的来讲就是建模建的模型没有三角化处理,让建模把模型全部三角化就行了。...原创 2020-04-08 13:50:28 · 2884 阅读 · 0 评论 -
Cesium在Vue中加载Draco压缩后的gltf模型
走了很多弯路首先找到node_modules/cesium/ThirdParty目录找到draco_decoder.wasm文件。在项目根目录下的public目录下新建ThirdParty,将draco_decoder.wasm复制进去,然后加载模型的时候什么都不用改,还是model:{ url: '模型目录'}就可以加载Draco压缩后的gltf模型了。其实就只解析压...原创 2020-03-23 13:17:17 · 3570 阅读 · 6 评论 -
ThreeJs做智慧城市项目后记
随着时间的推移技术的进步,前端越来越杂了,但是也越来越精彩了。只是会用一点ThreeJs,对于WebGl的原理并没了解过,这并不影响我们利用ThreeJs去做出一个非常炫酷的项目。开始新世界的大门打开啦!写在前面不要因为不了解就被这种3D展示的项目给吓到 其实实现起来很简单 很简单 很简单城市模型一份 最好是gltf模型,obj模型也没问题,我会介绍如何转化与压缩 PS:为什...原创 2019-11-04 14:24:31 · 46975 阅读 · 71 评论 -
Threejs 加载模型贴图不显示,只显示黑色的模型,也没报404错误的解决方案
看看是不是坑爹的建模把颜色材质颜色设置成黑色了!颜色贴图。默认为null。纹理贴图颜色由漫反射颜色.color调节。贼坑原创 2019-10-16 17:32:44 · 7408 阅读 · 1 评论 -
Nuxt使用prettier和eslint格式化代码时提示Delete `␍`eslint(prettier/prettier)
在项目根目录下的.prettierrc文件中写入即可"endOfLine": "auto"prettierWhy do I keep getting Delete ‘cr’ [prettier/prettier]?原创 2019-08-22 18:05:28 · 11121 阅读 · 2 评论 -
Threejs + Videojs/原生video/第三方播放器 实现全景视频/全景直播播放DEMO
原理原理其实很简单,做过全景图的同学都知道,球模型+全景图片贴图。 全景视频/全景直播就是 球模型+全景视频素材 。至于播放器样式,可以自己用Js+Dom自定义,或者更改videojs的样式 即便你是用原生video也是可行的 threejs官方demo就是原生video标签。本demo就是拿着threejs的demo改的<!DOCTYPE html><html ...原创 2019-06-03 13:23:51 · 18682 阅读 · 13 评论 -
vue/react使用JSDoc、jsconfig.json 完成vscode对于webpack的alias引入的js方法的提示
TS有个好处就是你引入方法会告诉你参数是什么类型返回什么类型首先你需要阅读JSDoc的文档和jsconfig.json的配置,你也可以百度下中文的文档比如我的webpack的alias配置如下, common中是我的公共方法chainWebpack: config => { config.resolve.alias .set("@common", resolve("...原创 2019-04-27 15:22:57 · 5586 阅读 · 2 评论 -
React-Router4 嵌套路由实现的两种方式以及路由过渡动画的实现方式
刚学习react的路由 一个小的后台管理demo目录结构// 后台管理页面通常有两种布局方式 // 一种是没有导航栏的 登录页面// 一种是含有导航栏的 各功能性页面 // 导航栏不需要每次都渲染 Layout中含有导航栏 和 传递进来的子组件即可// 大致思路就是 登录页面和Layout页面同级 切换路由的时候 切换Layout中的子组件src pages Layou...原创 2019-03-08 09:38:54 · 1858 阅读 · 2 评论 -
vue-particles IE报错babel不能转es5的折中解决方案(vuecli3如何给js设置loader的include)
报错因为babel没有转不同的vue-cli有不同的将该插件加入到babel中的方法在vue-cli3中const path = require("path");const resolve = function(dir) { return path.join(__dirname, dir);};module.exports = {chainWebpack: config =&g...原创 2019-03-11 14:07:04 · 5195 阅读 · 7 评论 -
Vue使用百度分享,组件切换、销毁分享失效的解决办法
销毁分享组件,再重新建立分享组件,发现分享按钮不见了查了一些资料 什么 重设config啥的 都不行后来发现了init方法顾名思义 重新初始化一下就行了 也不要重新去添加标签使用百度分享的init方法/* eslint-disable */export default { mounted() { // 关键代码在这里 如果已经加载了 就init它 没有加载 就初始化 ...原创 2019-01-03 14:13:52 · 1094 阅读 · 0 评论 -
JS判断浏览器是否缩放(参考斗鱼源码)
// 翻斗鱼的源码看到的 define("douyu/com/zoom", ["jquery", "shark/observer", "shark/util/cookie/1.0", "shark/util/storage/1.0", "douyu/context", "d原创 2018-12-15 14:35:31 · 1235 阅读 · 0 评论 -
静态页面、伪静态页面、SPA、SSR、预渲染之间的联系
写在前面,本文是我查阅资料得出的粗略理解,如有不对请指正,感谢!查阅资料得知 爬虫对URL和查看网页源码时候查看到的DOM结构有很强的依赖关系SPA页面众所周知查看网页源码后,除了你写的index.html里面的内容 没有生成的真实DOM结构(通过JS动态增删,部分搜索引擎拿不到这些),而且url不用history模式,生成的都带#号,完全不利于SEO而SSR服务端渲染,就拿Nu...原创 2018-12-04 11:00:38 · 3053 阅读 · 0 评论 -
解决在Iframe中切换页面闪动的问题
很简单 那就是——加入淡入动画!css中给body设置opacitybody{opacity: 0; transition: opacity 0.2s}body.active{opacity: 1}js中让body显示$('body').addClass('active')整个页面切换的时候就会如丝般顺滑不可思议...原创 2018-03-02 14:22:33 · 11956 阅读 · 2 评论 -
手把手教你利用前端字体文件(.ttf)混淆数字来阻止爬虫爬取网站数据
利用字体文件混淆数字 展现给用户正确的数字 而在dom结构中是混淆的数字看的是对的 但是爬到的确是错的前端防爬虫!原创 2017-12-21 15:54:50 · 8972 阅读 · 9 评论