bldf/yd-spa
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
1: 我们在使用组件的时候,不能和库发生冲突 2: 在使用 export default 的时候。 a/index.js: export defalult {} 在引入的时候, 可以定位到目录文件夹就可以了, 默认会找对应的文件夹中的index.js import obj from 'a' ; 3: 在编译 es6 的时候, 不需要对所有的浏览器都编译, 如果浏览器支持 es6 ,我们在编译为es5 ,会降低浏览器的性能。 4: webpack 默认只能处理 js 。 css 只能使用插件去支持 5: 单页应用是使用各个不同的组件组合而成的, 所以我们尽量把各个不同的组件放到不同的文件夹中 6: 建议不要使用css in js 不方便分离 , 这样效果不好, 因为这样会生产 300多kb的代码, 如果css分离出来, js会释放很多代码 7: webpack每改一次, api都变一次, 非常的烦人 8: 2个非常重要的包,因为所有的开发工作中的细节都会用到这2个包 1: yargs 2: xshelljs 9: 在变量声明的时候使用_代表私有变量 10: 通过yargs-parser 就可以区分是上线环境还是生产环境, 然后就可以导入不同的js做一下区分 11:提取插件,能够将css提取出来 mini-css-extract-plugin 12: 一般项目中不需要styleloader, 不需要往页面里边插入, 直接提取css 13: 尽量不要使用cli, cli会把人写残废的 14: 在安装 npm 包 的是后一定不要看清楚, 不要不小心安装了野包 15: 原生浏览器已经支持发送ajax请求了 fetch('/api/test').then(response=>response.json()).then(data=>{console.log(data)}) 做统计发请求用 : navigator.sendBeacon('/abf.do') , 不会占用主线程 16 : 安装webpack-dev-server 运行的时候在内存中运行的, 这样我们在开发的时候就会非常的方便 17 : 模范注释: 可以改变ChunkName的名字 import(/* webpackChunkName:"async-banner"*/"./components/banner/index.js").then(_=>{ _.default.init() ; console.log('调用了第二次成功了') }); 18 : webpack js 配合 tree shek 强制把不需要的代码给干掉 19 : 多页转为单页, 班主任讲过。 20: pjax 转单页 ------------------- 架构师启蒙课 第二讲 ---------- 21 : webpack4 和 之前的是有一些差别的,把一些复杂的插件给罗到外边去了 optimmization:{ } 22 : webpack 没有 css 的 tree shek . 需要自己弄。 23:const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩 css 使用的,还可以去除无用的css类 24 : 如果我们在使用第三方npm包的时候,如果使用的变量声明的还是var , 就说明比较老了, 能用就用,能不用就不用 。 25: 单页的初始化加载流程: 1:入口 2: router 3: service 4: view 5: 为什么大型的项目没有人这么干??? 1: 会出现大量的白屏时间 view 26: optimmization : 以下2个属性非常非常重要 namedChunks : moduleIds : splitChunks:{ } runtimeChunk:{//webpack核心运行时 } 27: 单页应用中的loading有2种玩法 。 1: 直接注入到标签内 2: 添加解析js加载,可以写一个插件,能够写一个真实的loading 把所有的js放入到一个数组里边去,可以做一个真loading 28: webpack 运行时的代码得提取出来。 29 : 自己配置babel-loader 30 : 提取公共的代码 : optimization: { noEmitOnErrors: false,//如果报错,不打包 splitChunks:{// 配置公共包, 当一个js文件多次被引入的时候, 提取出来 cacheGroups:{ commons:{ chunks:'initial', name:'common', minChunks:2,// 一般都是2 //minChunks:2, webpack考虑到性能优化的问题, 如果一个公共js的大小没有30kb就不拿出来作为一个请求 //minChunks:1, 强制性的提取公共的包 maxInitialRequests:5, minSize:0// 文件最小是0 } } }, 31 : 配置图片压缩的loader ; 32 : 技术选型: 1: 单页应用场景: 1: 内部系统 2:移动端 3:三大框架 2: 单页的路由 2中 pushstate hash 3: JQ 三大框架 微前端 4: ××××××××××××××××××××× ××××××××××××××××××××× webpack 只是认识js 其余的全都是 loader ××××××××××××××××××××× ××××××××××××××××××××× ******************多页考研技术, 单页相对比较简单***************************** ------------------- 加载中 样式和html------------ <div class="loading-bg"></div><div class="loading sk-fading-circle selected" style=""><div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div> <style> .sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0} .sk-fading-circle .sk-circle:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#fff;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both} .sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)} .sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)} .sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)} .sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)} .sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)} .sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)} .sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)} .sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)} .sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)} .sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)} .sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)} .sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s} .sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s} .sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s} .sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s} .sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s} .sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s} .sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s} .sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s} .sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s} .sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s} .sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s} @-webkit-keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0} 40%{opacity:1} } @keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0} 40%{opacity:1} } .loading.sk-fading-circle.selected{height:60px;width:60px;top:50%;left:50%;z-index:999;position:absolute;margin-left:-30px;margin-top:-30px} .loading-bg{position:fixed;width:100%;height:100%;left:0;top:0;z-index:99;background:#f0f9ff;background:-moz-linear-gradient(top,#25597b 0,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);background:-webkit-linear-gradient(top,rgba(240,249,255,1) 0,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);background:linear-gradient(to bottom,rgba(240,249,255,1) 0,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff', GradientType=0 )} </style> ************************ Begin 自己扩展 ************************** 1 : element-ui 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: # For babel6 npm i babel-plugin-component@0 -D ************************ Begin 自己扩展 **************************
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published