Angular 通过按需引入解决引入 highlight.js 后导致打包文件过大的问题

2020年04月13日 22:58 · 周一/阅读 774 次/评论 0 条

这两天发现站点的文章页和关于页加载速度过慢的问题,通过 Chrome DevTools 请求发现 2-es2015.xxx.js 的打包文件已经超过 800KB,所以需要找一下优化的点,解决一下请求 js 文件过慢的问题。

构建文件过大

不过需要先使用 webpack-bundle-analyzer 来分析打包出来的 js 文件
首先通过 npm 全局安装 webpack-bundle-analyzer

npm i webpack-bundle-analyzer -g

然后通过在 Angular 构建命令后增加 --stats-json 项目执行打包:

ng build --prod --stats-json

接着使用 webpack-bundle-analyzer 来分析构建的包:

webpack-bundle-analyzer dist/browser/stats-es2015.json // 后面的路径请按照实际生成路径填写

最后在浏览器中访问 webpack-bundle-analyzer 生成的地址,可以看到整个 2-es2015.xxx.js 的文件几乎被 highlight.js 的库文件所占用:
分析结果

根据 highlight.js 的文档介绍,它支持只加载核心文件以及注册对应的语言,所以需要将项目中的引入方式做做一下修改,原来的引入方式

import hljs from 'highlight.js';

为了缩小项目体积,应该改成:

// Github 文档上写的是 core.js,但是新版好像修改成了 highlight.js
import hljs from 'highlight.js/lib/highlight.js';

// 根据需要使用到的语言引入,这里引入了 xml、javascript 和 css 做示例
import xml from 'highlight.js/lib/languages/xml';
import javascript from 'highlight.js/lib/languages/javascript';
import css from 'highlight.js/lib/languages/css';

// 并且通过 hljs 的方法注册即可
// 如果是 Universal 请在外面套一层 if (isPlatformBrowser(this.platformId))
// 否则部署会报错,错误原因 ReferenceError: window is not defined
ngOnInit(): void {
  hljs.registerLanguage('xml', xml);
  hljs.registerLanguage('javascript', javascript);
  hljs.registerLanguage('css', css);
}

最后在通过 Angular 打包并使用 webpack-bundle-analyzer 分析文件,highlight.js 的库文件占用已经只剩下 48KB:

构建后体积缩小

分类:Angular

更新 :2021年03月03日 21:55 · 周三

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

文章评论 (0)

暂无评论