Rumah  >  Soal Jawab  >  teks badan

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

天蓬老师天蓬老师2748 hari yang lalu1061

membalas semua(4)saya akan balas

  • 黄舟

    黄舟2017-04-11 10:29:45

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

    参考案例

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

    balas
    0
  • 阿神

    阿神2017-04-11 10:29:45

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

    balas
    0
  • 高洛峰

    高洛峰2017-04-11 10:29:45

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

    balas
    0
  • 高洛峰

    高洛峰2017-04-11 10:29:45

    直接静态引用吧。

    balas
    0
  • Batalbalas