记一次前端性能优化

记一次前端性能优化

公司新做的一个项目，写完代码第一次上测试环境测试，首屏加载要6秒左右的样子，于是进行了一系列的优化，成功将首屏时间降到了200ms左右；今天写篇文章，分享一下这次优化心得。
项目背景
vue-cli 2.x框架

一、代码技巧
二、压缩
三、cdn

一、代码技巧
去掉多余代码
减少请求数量
复用组件
二、压缩代码

打开webpack ``gzip``压缩

使用这个网站[https://tinypng.com](https://tinypng.com/)压缩图片

配置nginx开启``gzip``（自行百度）

使用``npm run build --report``分析打包后代码块大小，如果有重复得依赖可以在``webpack.base.conf.js``中配置如下属性：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bn.js': path.resolve(process.cwd(), 'node_modules', 'bn.js')//我这里打包后重复引用了“bn.js”
    }
  },

三、cdn

在vue项目得唯一html文件中引入cdn加速过的文件

<script src="https://cdn.jsdelivr.net/npm/google-protobuf@4.0.0-rc.2/google-protobuf.min.js"></script>//jsdelivr 一个国外在中国搭建得开源免费得cdn平台，还可以把大图片上传到github仓库进行加速，这个很简单自行百度。
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.2/vue.min.js"></script>//bootcdn bootstrap搭建得一个国内cdn，也可以用，但是插件没有jsdelivr得全
//注意引入的先后顺序，比如vue-router,vuex,element-ui都依赖vue,所以vue必须放在前面。
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5@0.5.27/dist/cos-js-sdk-v5.min.js"></script>
<script defer src="https://cdn.bootcdn.net/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script defer src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script defer src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script defer src="https://cdn.bootcdn.net/ajax/libs/mathjs/7.5.1/math.min.js"></script>

webpack通过webpack.base.conf.js的externals属性进行扩展，可以让你像安装包一样使用import引入，这个属性具体用法webpack官方文档写的很详细，代码如下：

	 externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT',//这个ELEMENT怎么来需要你自己查看下这个插件的源码，其他也都是这样。
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    'd3': 'd3',
    'jszip': 'JSZip',
    axios: 'axios',
    cookie: 'js-cookie',
    math: 'mathjs',
    'cos-js-sdk-v5': 'COS'
  },

以上一系列操作后页面速度是1.6s。
但是用cdn引入是有个很大问题哈，就是别人的网站挂了你自己的网站也要凉，所以自己要做好后手哈。