项目中你做过哪些优化.md

项目中你做过哪些优化

功能点的实现上

1. 对动态表单下拉框的内容查询提出建议。原先请求一个动态表单的页面，后台会一次性把很多的下拉列表都带出来数据量很大。后我提出意见，第一次获取的时候后台可以只返回当前选项的键值对，当用户点击下拉框的时候我才获取数据。
2. 列表中图片懒加载。因为我们项目中不考虑兼容性，所以我们直接就用了img标签的loading="lazy"实现图片懒加载，但是如果要考虑兼容性的话，可能需要用监听window.scroll然后通过获取要懒加载图片距离可是窗口顶部的距离来判断需不需要加载。(实现图片懒加载的几种方案比较)
   1. 一些需要根据用户输入的信息实时查询的输入框，需要做防抖处理

项目的构建上

• 先使用webpack-bundle-analyzer分析打包后整个项目中的体积结构，既可以看到项目中用到的所有第三方包，又能看到各个模块在整个项目中的占比。

• Vue路由懒加载，使用() => import(xxx.vue)形式，打包会根据路由自动拆分打包。

• 第三方库按需加载，例如lodash库、UI组件库

• 使用purgecss-webpack-plugin和glob插件去除无用样式(glob插件可以可以同步查找目录下的任意文件夹下的任意文件)：

  new PurgecssWebpackPlugin({
      // paths表示指定要去解析的文件名数组路径
      // Purgecss会去解析这些文件然后把无用的样式移除
      paths: glob.sync('./src/**/*', {nodir: true})
      // glob.sync同步查找src目录下的任意文件夹下的任意文件
      // 返回一个数组，如['真实路径/src/css/style.css','真实路径/src/index.js',...]
  })

• 文件解析优化：

  • babel-loader编译慢，可以通过配置exclude来去除一些不需要编译的文件夹，还可以通过设置cacheDirectory开启缓存，转译的结果会被缓存到文件系统中
  • 文件解析优化：通过配置resolve选项中的alias。alias创建import或者require的别名，加快webpack查找速度。

• 使用webpack自带插件IgnorePlugin忽略moment目录下的locale文件夹使打包后体积减少278k

  • 问题原因：使用moment时发现会把整个locale语言包都打包进去导致打包体积过大，但是我们只需要用到中文包

  • 在webpack配置中使用webpack自带的插件IgnorePlugin忽略moment目录下的locale文件夹

  • 之后在项目中引入：

    // index.js
    // 利用IgnorePlugin把只需要的语言包导入使用就可以了，省去了一下子打包整个语言包
    import moment from 'moment';
    // 单独导入中文语言包
    import 'moment/locale/zh-cn';

• 使用splitChunks进行拆包，抽离公共模块，一些常用配置项：

• chunks:表示选择哪些 chunks 进行分割，可选值有：async，initial和all

  • minSize: 表示新分离出的chunk必须大于等于minSize，默认为30000，约30kb
  • minChunks: 表示一个模块至少应被minChunks个chunk所包含才能分割，默认为1
  • name: 设置chunk的文件名
  • cacheGroups: 可以配置多个组，每个组根据test设置条件，符合test条件的模块，就分配到该组。模块可以被多个组引用，但最终会根据priority来决定打包到哪个组中。默认将所有来自 node_modules目录的模块打包至vendors组，将两个以上的chunk所共享的模块打包至default组。

• DllPlugin动态链接库，将第三方库的代码和业务代码抽离：

  • 根目录下创建一个webpack.dll.js文件用来打包出dll文件。并在package.json中配置dll指令生成dll文件夹，里面就会有manifest.json以及生成的xxx.dll.js文件
  • 将打包的dll通过add-asset-html-webpack-plugin添加到html中，再通过DllReferencePlugin把dll引用到需要编译的依赖。

• 在ngnix上开启gzip压缩。

网络缓存上

• 对于一些没有指纹信息的资源，例如index.html可以使用Cache-Control: no-cache开启协商缓存
• 对于带有指纹信息的资源，一般会使用splitChunksPlugin进行代码分割，来保证造成最小范围的缓存失效，再设置Cache-Control: max-age=3153600