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

Question

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又可以使用了，难道是下载中断了？奇怪...

Answer 1

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

参考案例

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

Answer 2

有没有考虑使用 CDN
比如 http://www.bootcdn.cn/highlight.js/

Answer 3

我很久以前也遇到过这个问题，后来照着官方文档说明，自己克隆仓库，只为js，html和css做了编译。
编译后的大小30kb，还是未压缩的，你可以直接调用我打包好的文件：
highlight.pack.js
对应的css，1kb：
highlight.css

Answer 4

直接静态引用吧。