前端性能优化

前端性能优化

性能对于一个可供使用的Web产品来说是非常重要的，而性能优化主要最本质的要求就是减少HTTP请求，减少代码下载量，为做到这些，我们可以从客户端和服务端两个方面来考虑。

• 服务端
  服务端主要用的是Nginx,主要是以下三个方面

  1. 采用http2,http2具有很多新特性，例如多路复用、头部压缩，大多数现代浏览器都支持
  2. index.html不设置缓存，其余如JS、CSS全部设置缓存
  3. 开启gzip压缩
  4. 图片放到CDN上

• 客户端
  目前项目采用的技术栈为Vue，Vue-cli本身的production本身的压缩优化已经做得非常不错了，但还有一些可以优化的地方:

  1. 对于一些简单的模块（如轮播图之类）尽量自己写，不要为了一个功能而引入一个Element-ui之类的

  2. 使用外部加载的模式加载第三方模块

     // 目前采用的是Vue-cli 3，其webpack版本也升级到了4，其目录结构相对来说也发生了很多变化，变得更加简洁了
     //  ./public/index.html
     // 下载好的文件可以放在 ./public/packages
     在public/index.html中通过<script src="./packsges/filename.js"></script>标签引入下载好了的文件
     // 在vue.config.js中配置
     module.exports = {
       configureWebpack: config => {
         config.externals = {
             'fileAlia':'fileName'      // 这里的fileName为模块暴露出来的全局变量，fileAlia为你在.vue单文件中国引用是使用的
         }
       }
     }
     //具体请看：https://webpack.docschina.org/configuration/externals

  3. 由于项目还要兼容IE 11,而目前IE 11对于ES 6语法的支持还不够，需要引入babel-polyfill

     // 早期采用的是 npm install --save babel-polyfill 的方法
     同时在vue.config.js中配置项目的入口地址是还要加上'babel-polyfill'
     config.entry.app = ["babel-polyfill", "./src/main.ts"];
     优化后:
     // 首先下载babel-polyfill文件就耗了我很久，最后还是通过npm install --save babel-polyfill 下载到本地，然后去找的
     // 兼容IE 写法  ./public/index.html
     
     <script type="text/javascript">
     if(window.navigator.userAgent) {
       var userAgent = window.navigator.userAgent;
       if (userAgent.indexOf('Trident') > -1) {
         console.log('ie');
         document.write('<script type="text/javascript" src="./list/polyfill.min.js"><\/script>');
       }
     }
     </script>

  4. webpack的打包优化
     例如一些uglifyOptions,sourceMap