项目结构调整

  1. Base开头是全局业务组件 BaseForm BasePagination BaseIcon
  2. Form开头是Form相关的小组件 FormPanel
  3. Table开发时Table相关的小组件 TableOptions
  4. The开头的是每个页面引入的无状态组件,TheSideBar TheBreadcrumb

性能优化

从17m变成2.3m

网络请求相关

  1. 用到的第三方类库使用CDN,推动运维搭建自己的CDN
  2. 合理的缓存策略,例如首页的大背景图等确定长期不变的资源直接强缓存Cache-Control: max-age=1000000,某些资源 选择协商缓存
  3. 开启gzip,不借助nginx的话使用compression-webpack-plugin,节省nginx资源,少占用cpu gzip_static on,NGINX开启这个选项即可主动寻找.gz结尾的文件,就不会占用CPU去压缩文件了。

构建相关

  1. 路由懒加载 使用import(),传统路由组件通过import静态打包到项目里面,所有的页面组件都在一起了,生产环境下就加载的慢了。 import()使ES6的模块有了动态加载的能力,让url匹配到相应的路径时,会动态加载页面组件,这样首屏的代码量会大幅减少,webpack会把动态加载的页面组件分离成单独的一个chunk.js文件,同时配置上路径别名会更好用。
  2. 合理使用路径别名,例如@ utils mixins等等, 可以减少模块查找时耗费的时间。
  3. 图片懒加载,在一开始图片只使用展位图,滚动到不同的位置加载不同的真正的图片吗,一般有两个方法:
  • element.getBoundingClientRect(),该方法返回一个DOMRect对象,包含了bottom height left right top width x y值,其中的top值代表当前DOM节点距离窗口顶部的高度,需判断top值是否小于当前浏览器窗口的高度(window.innerHeight),若小于说明已经进入用户视野,然后替换为真正的图片即可。 使用这个方法需要注意三点:
  1. 需要监听scroll事件,注意函数节流
  2. 首屏渲染时不会触发scroll,需要手动调用事件处理函数
  3. 当所有需要懒加载的图片都被加载完了,清楚事件监听器。
  • IntersectionObserver()
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// intersectionObserver 实现懒加载
let imgList2 = [...document.querySelectorAll(".intersection_observer")]

let lazyLoad2 = function () {
    // 实例化observer
    let observer = new IntersectionObserver(entries => {
        //entries存储着所有观察被元素的intersectionObserverEntry配置
        entries.forEach(entry => {
            // 大于0表示进入视口
            if (entry.intersectionRatio > 0) {
                entry.target.src = entry.target.dataset.src
                //取消观察
                observer.unobserve(entry.target)
            }
        })
    })
    imgList2.forEach(img => {
        observer.observe(img)
    })
}
  1. 图片压缩

编码相关

  1. 创建DOM相关的需求,尽量使用文档碎片
1
2
3
4
5
6
7
8
9
const fragment = document.createDocumentFragment();
  
let child;
while ((child = vm.$el.firstChild)) {
  fragment.append(child);
}

// 处理完文档碎片
element.appendChild(fragment);
  1. 避免频繁获取视图信息(getBoundingClientRect,clientWidth,offsetWidth),这些操作会频繁地引发重排、重绘,而正式情况下浏览器会通过一个队列维护这些可执行性操作,等到超过了最大值或过了指定时间(1000ms/60 = 16.6ms)才会去清空队列一次性执行操作
  2. 高频监听需要防抖节流
  3. CSS3动画,transform触发渲染层,开辟新的图层,避免重排重绘。