2023 day2 晚上学习内容

一.vue项目体积随得页面增加变得越来越大，怎么优化打包速度？

1.路由懒加载 ，各个模块分类，一个一级分类指定一个chunkName，指定webpackChunkName包名字（) => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home');

2.第三方组件库的按需加载，通过安装babel-plugin-component，配置babel.config.js的plugins，设置libraryName

3. CDN，在webpack中有个externals，它可以忽略掉不需要打包的库

4. GZIP， webpack配置， new 一个CompressionWebpackPlugin. 当文件体积超过设置threshold的时候，进行gzip压缩，生产同名的.gz文件，然后配置nginx实时压缩和静态压缩等(gzip on，gzip_static on;)，让浏览器请求的时候，如果有.gz文件，返回压缩文件，没有的话，进行实时的压缩

5. 通过分析打包bundle的大小，进行相应的处理

6. vue.config.js文件中配置：productionSourceMap: false

二. vue的provide和inject， 情景：组件很多层嵌套，使用props传值和emit往上传播，修改太麻烦。 

可以在祖宗组件定义provide方法，return 一个方法或者变量， 然后某个层级的组件使用reject来注入祖宗传来的方法

三.给定的一个排序的数组，找出其中二个数的和为目标值k的下标（前提只存在一组和为k的数）

双端指针移动，左右各放一个指针，往中间移动。 如果和小于k，左指针往右移动， 如果和小于k，右指针往左移动，直到等于k，返回下标

四. vue的data为什么是函数

当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响