项目背景
中小项目,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%
持续优化中...
最后
感谢网上搜刮到的一些方案,没有一一记录