使用vue.js总结的首屏优化的方案

1.按需引入第三方组件，webpack对第三方资源包进行分包配置

externals: {    vue: 'Vue',    vuex: 'Vuex',    'vue-router': 'VueRouter',    axios: 'axios',    'element-ui': 'ELEMENT'}//key 为依赖包名字，value为抛出的全局变量

2.vue-router懒加载

const RankList = () => import( /* webpackChunkName: "RankList" */ '@/components/RankList')

/* webpackChunkName: "RankList" */  是打包后文件名称，后面是文件路径。

'@/components/RankList'  是文件路径。

//webpack代码中配置对应的chunkFilename
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),//文件格式，文件名.文件哈希
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')//文件切割后的文件名称。这里的name对应的就是路由中引入文件时候的webpackChunkName
}

3.进行图片的压缩，雪碧图的引入

4.开启gizp压缩，前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。

npm i compression-webpack-plugin -D

//webpack配置
const CompressionWebpackPlugin = require('compression-webpack-plugin')plugins: [   new CompressionWebpackPlugin()]

gzip压缩适用于大部分浏览器，如果不适用的小众浏览器，也会直接访问原始文件

当打开浏览器F12出现

Content-Encoding: gzip

标识gizp配置成功

5.webpack相关配置优化

1. 使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件；生产环境关闭源码映射，一方面能减少代码包的大小，另一方面也有利于系统代码安全；清除打印日志和debugger信息；配置SplitChunks 抽取公有代码，提升你的应用的性能
2. 使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件 。

6.前端代码的优化

1. 合理使用v-if和v-show
2. 合理使用watch和computed
3. 使用v-for必须添加key, 最好为唯一id, 避免使用index, 且在同一个标签上，v-for不要和v-if同时使用
4. 定时器的销毁。可以在beforeDestroy()生命周期内执行销毁事件；也可以使用$once这个事件侦听器，在定义定时器事件的位置来清除定时器