前端性能-首次加载优化70%-六虎

项目背景

中小项目，Vue-cli3 + vue2 + webpack4

目标

缩短白屏时间，用户能够更快的看到我的页面！

白屏时间：从打开页面到看到页面，中心白屏停留的时间。

方向

1.削减资源体积，然后缩短恳求时间

2.削减资源恳求个数，然后缩短等待时间

准备工作

怎么知道打包体积？

打包构建的时分，运用–report命令：

vue-cli-service build --report

打包完毕后，会在dist目录里边生成一个report html文件，里边会显示你打包体积散布状况，能够根据项目状况，侧重优化。

大概长这样（图片来自网络，并非我项目实际状况）

怎么知道打包速度

有的人能够经过–progress检查到打包耗时，可是关于我项目无用，运用ProgressBarPlugin插件解决

config.plugins.push(new ProgressBarPlugin())}

开始发力

0.删去你没用到的代码

在webpack里加上下面插件，每次serve的时分，会生成一个json文件，里边会显示你没用到的文件

config.plugin('uselessFile')
.use(new UselessFile({     
    root:path.resolve(__dirname, './src'),     
    out:'./fileList.json',     
    clean:false,       
    exclude: /node_modules/ 
}))  
}

1.让没有按需引进的库按需引进

比方：lodash

之前的引进方法：

import lodash from 'lodash'

运用按需引进

import find from 'lodash/find

打包体积少了很多…

2.引进一个库最小的资源

举个比方，有一个库叫a，咱们一般引进方法为

import a from 'a'

咱们能够去node_modules里边查找检查一下资源的巨细，有么有a.min.js 或者是 a.min.min.js，找个体积最小的！

比方：

import vis from 'vis-network'

改成

import vis from 'vis-network/dist/vis-network.min'

打包体积少了很多…

3.替换更小的库

比方：moment

刚开始我参阅了网上的方案，在webpack里边配置，忽略不会运用到的moment部分，然后达到削减打包体积的作用：

webpack.IgnorePlugin(/^./locale$/, /moment$/));

成功让打包出来的moment体积从600多k降到了160多k，成果非常显著！

可是想着100多k关于我只运用了简单的时间函数来说，还是很大了，后来：

抛弃moment，运用dayjs！

然后打包出来只有6k！！！6K！！！

4.敞开Gzip

const productionGzipExtensions = ['js','css']
const gzipCompressPlugin = new CompressionWebpackPlugin({        
    filename: '[path].gz[query]',     
    algorithm: 'gzip',       
    test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'), 
    threshold: 10240, 
    minRatio: 0.8, 
    })   
config.plugins.push(gzipCompressPlugin)

5.出产环境删去console等

留意，安装terser-webpack-plugin版别要留意与你webpack的对应，否则会安装失败哦！我运用的是4.2.3

  let terserOption = new TerserPlugin({
  terserOptions: {            
  test: /.js(?.*)?$/i,        
  exclude: //node_modules/,    
  warnings: false,           
  mangle: true, 
  compress: {   
     drop_console: true,             
     drop_debugger: true,        
     pure_funcs: ['console.log'] 
 }
 )}
 config.plugins.push(terserOption)

6.出产关闭sourcemap

productionSourceMap: false

7.删去prefetch

config.plugins.delete("prefetch")

删去了这个，初次加载时间优化了好多…

作用怎么？

初次加载速度优化70%

打包体积优化60%

持续优化中…

最后

感谢网上搜刮到的一些方案，没有一一记载

前端性能-首次加载优化70%