前端性能优化

普通代码优化

减少 HTTP 请求

• 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。

静态资源使用 CDN

• 内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器
• 当服务器离用户越远时，延迟越高。

CSS 放在文件头部，JavaScript 文件放在底部

• 加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的

使用字体图标 iconfont 代替图片图标

• 字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小

防抖

短时间重复做操作，可以用防抖debounce等优化方式，减少http请求

function debounce(func， wait) {
  let timeout;
  return function() {
    let context = this; // 指向全局
    let args = arguments;
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func.apply(context， args); // context.func(args)
    }， wait);
  };
}
// 使用
window.onscroll = debounce(function() {
  console.log('debounce');
}， 1000);

节流

只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求

function throttle(fn， delay) {
  let prevTime = Date.now();
  return function() {
    let curTime = Date.now();
    if (curTime - prevTime > delay) {
      fn.apply(this， arguments);
      prevTime = curTime;
    }
  };
}
// 使用
var throtteScroll = throttle(function() {
  console.log('throtte');
}， 1000);
window.onscroll = throtteScroll;

webpack性能优化

打包优化

loader优化

• 优化Loader的文件搜索范围,下次只需要编译更改过的代码文件即可

loader: 'babel-loader?cacheDirectory=ture'

HappyPack

• Node是单线程运行的，所以Webpack在打包的过程中也是单线程的，特别是在执行Loader的时候，这样会导致等待的情况
• HappyPack可以将Loader的同步执行转换为并行的

module:{
        loader:[
           {
                //js文件才使用babel
                test:/\.js$/,
                //只在src文件夹下查找
                include:[resolve('src')]，
                exclude:/node_modules/,
                //id后面的内容对应下面
                loader:'happypack/loader?id=happypack'
           }
        ]
    },
    plugins:[
      new HappyPack({
        id:'happypack',
        loaders:['babel-loader?cacheDirectory'],
        //开启4个线程
        threads:4
      })
    ]

动态链接库DllPlugin

• DllPlugin可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案

//单独配置在一个文件里
//webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry:{
        //想统一打包的库
        vendor:['react']
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].dll.js',
        library:'[name]-[hash]'
    },
    plugins:[
      new webpack.DllPlugin({
        //name必须和output.library一致
        name:'[name]-[hash]',
        //该属性需要与DllReferencePlugin中一致
        context:__dirname,
        path:path.join(__dirname,'dist','[name]-mainfest.json')
      })
    ]
    
// webpack.conf.js
module.exports={
 //...省略其他配置
 plugins: [
   new webpack.DllReferencePlugin({
     context: __dirname,
     mainfest:require('./dist/vendor-mainfest.json')
   })
 ]
}

提取第三方公用库

• 第三方库一般都比较稳定，不会经常改变。所以将它们单独提取出来，作为长期缓存是一个更好的选择。
• 使用 webpack4 的 splitChunk 插件 cacheGroups 选项

optimization: {
      runtimeChunk: {
        name: 'manifest' // 将 webpack 的 runtime 代码拆分为一个单独的 chunk。
    },
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: 'chunk-vendors',
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                chunks: 'initial'
            },
            common: {
                name: 'chunk-common',
                minChunks: 2,
                priority: -20,
                chunks: 'initial',
                reuseExistingChunk: true
            }
        },
    }
},

提取cdn

• 将共用的组件库使用cdn的方式进行引用
• 打包不会打包对应的代码
• 引用方式通过externals配置可以达到和不引用cdn的功能一样的用法

// 第一步：引用antd、react、react-dom、moment、lodash的cdn
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.1/locale/zh-cn.js"></script>
<script crossorigin="anonymous"
  integrity="sha512-N8Wbuq8SeLoZ4j1Jfwva1Xd8MVNrSxVFzuxDF1YnUcNB6YncjyNtUAuPs1SSncDd98FcM/ZkvgXsr3DfwERW6A=="
  src="https://lib.baomitu.com/antd/3.26.15/antd-with-locales.min.js"></script>
<link crossorigin="anonymous"
  integrity="sha512-cBOfQ2h52wVLbgKbFuf6wf0qlrRhbwwAlrIMFjU3NrvRbr/OxYplBiIV4bmk1arz1g7T85HGq36hP6kAxPyt1w=="
  href="https://lib.baomitu.com/antd/3.26.15/antd.min.css" rel="stylesheet">
<script crossorigin="anonymous"
  integrity="sha512-131CXtlyQOY833mTVES49ngssH0LdxpKuv6NU/ex69688rmm+OSswA2yiiNAPTelbhwo0PVEts8a5RlbQnA0rA=="
  src="https://lib.baomitu.com/antd/3.26.15/antd.min.js"></script>
  
// 第二一步：webpack.config.common.js修改
module.exports = {
  ...
  // externals告诉webpack那些资源从哪里寻找，值表示的当前环境下的变量，比如引入React之后，React被作为全局对象，webpack就回去寻找React对象
  externals: {
     "configs": "configs",
     "react": "React",
     "react-dom": "ReactDOM",
     "lodash": "_",
     "moment": "moment",
     "antd": "antd"

   }
  ...    
}

浏览器缓存和cdn缓存的区别

• 普通浏览器缓存：使用了缓存之后，浏览器不用再下载全部的文件，减少了下载量也就意味着提高了页面加载的速度，对于一些用户访问量巨大的网站而言，如果所有用户都去服务器请求数据，服务器会很快崩溃，并且在不同网络以及不同地区的用户，请求服务器的速度也不一样
• cdn缓存：创建一些最接近用户网络的边缘服务器，然后将文件缓存在这些边缘服务器（节点）上，这就是 CDN 缓存，当服务接入了 CDN 之后，浏览器本地缓存的资源过期之后，浏览器不是直接向源服务器请求资源，而是转而向 CDN 边缘节点请求资源

加载速度优化

代码压缩

• 压缩文件可以减少文件下载时间，让用户体验性更好

JavaScript：UglifyPlugin
CSS ：MiniCssExtractPlugin
HTML：HtmlWebpackPlugin

gzip 压缩

• gzip 是目前最流行和最有效的压缩方法

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [new CompressionPlugin()],
}

图片压缩

• 降低图片质量(JPG 格式的图片，100% 的质量和 90% 质量的通常看不出来区别)
• image-webpack-loader
• url-loader

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000, /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    /*对图片进行压缩*/
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}