Where is JavaScript?

博客前端优化之一 - 瞅瞅你打的包

博客之路漫长,待我优化之后轻装上阵

建立自己的博客,需要清晰的定位其作用。然后再根据具体的作用思考在开发阶段需要增加什么样的功能、在后期调试过程中做什么样的优化。这是一条漫长却有意思的道路,因为你总能发现提高的空间。

精简代码
处理好静态资源
平衡网络和服务器负载,平衡首屏和各个路由的负载

分析

本博客采用 Nuxt.js 开发,Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件,可以基于分析结果来决定如何优化打包生成的js文件。

修改配置文件

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
module.exports = { build: { analyze: true // or analyze: { analyzerMode: 'static' } } }

分析打包组成

              
  • 1
npm run build -a

https://static.littlewin.wang/blog/29-1.png

未压缩前的代码传输竟然整整有3 MB之多,果然功能一时爽,事后优化苦

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
Treemap sizes: Stat Show chunks: All (3 MB) common.4fbd9a622d69accddb18.js (1.77 MB) app.f788b6767244cad14ba6.js (241.48 KB) pages/article/_id.09548154f3d971f27df0.js (170.12 KB) pages/guest.891cb7004c0ec934f00b.js (151.03 KB) pages/index.1d28efb2b7e325fb6dbb.js (148.85 KB) pages/category/_name.01c44fb4973b2c447691.js (142.7 KB) pages/tag/_name.e60d6c273540aefe753d.js (142.61 KB) pages/search/_keyword.2415978ccc3b81813513.js (142.39 KB) pages/about.2d23b1640305263beaba.js (32.57 KB) layouts/default.5987c548a3b30edad96d.js (23.98 KB) pages/simple.c91205e2efa026663435.js (66.96 KB) manifest.7a1e066d94e917387e4e.js (0 B)

分析了一下,有以下几个库的加入值得商榷

highlight.js

这个包占据了 common.xxxxxx.js 的半壁江山,它的体积庞大,原因是支持了很多种编程语言的高亮显示,而我的个人博客中所用到的语言其实不多,所以没必要做全盘引入,所以怎么办呢?

一般用 Webpack 打包的项目可以参考Reducing bundle size of Highlight.js with Webpack。利用 WebpackContextReplacementPlugin 插件做部分引入。

Nuxt.js 中支持自定义的插件通过配置文件中的 plugins 导入,我们只需要按需定义最小化的 highlight.js

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
const highligher = require('highlight.js/lib/highlight') highligher.registerLanguage('css', require('highlight.js/lib/languages/css')) highligher.registerLanguage('xml', require('highlight.js/lib/languages/xml')) highligher.registerLanguage('json', require('highlight.js/lib/languages/json')) highligher.registerLanguage('bash', require('highlight.js/lib/languages/bash')) highligher.registerLanguage('less', require('highlight.js/lib/languages/less')) highligher.registerLanguage('scss', require('highlight.js/lib/languages/scss')) highligher.registerLanguage('shell', require('highlight.js/lib/languages/shell')) highligher.registerLanguage('nginx', require('highlight.js/lib/languages/nginx')) highligher.registerLanguage('stylus', require('highlight.js/lib/languages/stylus')) highligher.registerLanguage('python', require('highlight.js/lib/languages/python')) highligher.registerLanguage('javascript', require('highlight.js/lib/languages/javascript')) highligher.registerLanguage('typescript', require('highlight.js/lib/languages/typescript')) module.exports = highligher

ua-device.js

引入这个库是为了解析 userAgent ,从而在评论框中显示评论人的设备和系统。但这个库为了支持众多手机品牌,打包后体积也是较大,远超我的功能要求,考虑后选择了 ua-parser-js,有一定的扩展空间。

vue-awesome-swiper

https://static.littlewin.wang/blog/29-2.png

最初引入轮播组件是为了循环播放文章大图,但在实际体验过程中发现过多的图片加载开销大,博客是立志做一个文字分享和输出型的工具,图片只是辅助理解文字的手段而已,于是直接去掉

particles.js

Particles.js 是用来在网页上创建粒子效果的轻量级JavaScript库,在本博客中带来的观感体验并不足以忽略其体积,因此除去

animate.css

最早不知是调试什么组件动画时加入,博客已静态体验为主,少有的过渡效果也可以直接写出来,不需要这么多动画种类的支持

结果

打包后的文件体积缩小了约一半
https://static.littlewin.wang/blog/29-3.png

两打包后的js文件可以在1s内完成加载
https://static.littlewin.wang/blog/29-4.png

下一步

  • 自己手写替换使用度较小的某些库
  • 按需加载,分散首屏的加载压力
  • 整合样式文件,提高样式class复用性
  • 部署缓存至客户端或者nginx
  • 等等...

本文于 2017-11-20  发布在  编程  分类下, 当前已被围观 665 次

并被添加「 前端JavaScript 」标签

本站使用「 署名 4.0 国际」创作共享协议