记录前端

113 阅读3分钟

1、new Date()兼容性问题:在ie中new Date('2020-02-12').getTime()结果是NaN,在谷歌上没有问题,解决方法:把字符串中所有的‘-’替换成‘/’。

2、记一次项目中使用v-if和v-show的经验:点击按钮有一个弹框弹出来,弹窗是有z-index这个样式设置的,我当时用的是v-show让这个弹窗显示,v-show是浏览器正常渲染dom的,只不过是隐藏的,结果弹窗的z-index导致我页面的select无法正常显示

3、代码分割:(1)单页面应用:减少文件体积,拆分应用,把需要异步加载的内容改成异步加载,多页面应用:多依赖提取,因为浏览器是缓存js和css的,所以提取出来只加载一次 代码分割的目的:为了业务代码的纯净,有时不希望业务代码里混入第三方代码,或webpack配置代码,把第三方的代码和webpack配置代码拆分为单独文件 CommonsChunkPlugin是分割代码的,webpack3是使用这个插件,webpack4使用optimization: { splitChunks: { chunks: 'all' } } 异步引入模块,import和require,import(/webpackChunkName:'asd'/'modulea.js').then((res)=>{}),require([],function(){require('module.js')},'abc'),第三个参数是对模块的命名 4、热更新:保持页面状态不刷新浏览器的情况下即可看见更改的效果,hotmodulereplacementplugin 热替换插件,更改css代码,devServer:{ port:902, hot:true. hotOnly:true},module是webpack的全局的变量 5、webpack-dev-server是怎么搭建的 express:开启服务,webpack-dev-middleware,webpack-hot-middleware,http-proxy-middleware开发模式中间件,connection-history-api-fallback:重写路径 6、loader本质上是一个方法,注册loader,对于的文件内容给到loader,loader方法处理内容,方法return结果,对某一种类型的统一处理;plugin本质是监听生命周期,注册plugin,插件接收到webpack编译过程,今天某个生命周期,当编译到达某个生命周期时会自动的调用插件的监听 7、Babel使用,编译理论,插件编写 8、如何优化项目:路由得模块化与统一加载;打包骚操作-优化;插件解决项目问题,模块化的理解,require.context自动加载 子路由 image.png 总路由 image.png 打包优化:dll优化可以把第三方包进行处理 打包速度优化的总结: 1.处理的内容多少,处理步骤多少 2、能少处理就少处理 3、能够减少一些处理步骤 先预处理第三方库-》告诉我们的真正打包不需要处理这些

image.png

image.png 项目vuex过大,导致打包结果过大,处理:按组件异步拆分

image.png 9、优化请求:api文件,request:servicejs (1)接口api化,(2)请求自动绑定(3)防止重复提交 接口变成api:写一个总文件把所有模块的api文件合并到一起

image.png 10、自定义插件库及npm集成 插件可以封装组件,组件暴露 数据给插件 插件主文件 image.png

image.png

image.png package.json name是插件名字 license:MIT只能用我的,不能改我的,private:false,不是私有的,大家都能用 scripts:{'lib':'vue-cli-service build --target lib --name 插件名字 --dest lib src/plugins/index.js'} main入口文件'main':'lib/插件名字.umd.min.js' 上传到npm官网,在命令行输入npm login 回车 输入用户名和密码,邮箱 npm publish