javascript - vue使用highlight.js碰到的问题

问题描述

问 题

vue在使用highlight.js的时候，之前使用npm install安装的。安装开发完后，发现压缩后，竟然用了500k...在浏览器端实在太高了。在官方文档我也看到上面说用npm安装会使用所有的语言。

#默默的看了下，发现用了1.1M的空间。
du -h languages
1.1M    languages/

#入口文件lib/index.js
var hljs = require('./highlight');

#引入了很多languages
hljs.registerLanguage('1c', require('./languages/1c'));
hljs.registerLanguage('abnf', require('./languages/abnf'));
hljs.registerLanguage('accesslog', require('./languages/accesslog'));
省略...

module.exports = hljs;

1.我想到的第一个解决方案是直接到修改node_modules里面的lib/index.js入口文件，删掉不用的语言包。

但感觉不可行。每次安装的时候，都会覆盖，另外这种方法也欠妥。或者应该修改下，加上配置项目，来选择加载（默认加载全部，但允许加载指定语言，想去github上提个issue）？

2.另一个想到的解决方案是使用官网下载的打包好的文件放到lib目录，做为类库引用。

但是在引用的时候碰到问题。

#引用方式
import hljs from 'LIB/highlight.pack.js';

#但是我看里面的代码是立即执行函数，并没有使用export default什么的...妥妥的报错了...提示hljs不存在。
app.js:17189 Uncaught ReferenceError: hljs is not defined(…)

不知道如何解决比较好，求助下大家，谢谢～

==== 补充下 =====

我从官网重下了另一个文件，方案2又可以使用了，难道是下载中断了？奇怪...

解决方案

这个不是因为vue引起的，而是因为webpack打包的原因。
可以使用webpack.ContextReplacementPlugin插件来实现忽略不需要的文件以避免打包。

参考案例

我这个项目中 忽略掉了moment.js中除中文以外的语言文件。
https://github.com/Rozbo/blog

这篇关于javascript - vue使用highlight.js碰到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！