Maison > Questions et réponses > le corps du texte
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;
但感觉不可行。每次安装的时候,都会覆盖,另外这种方法也欠妥。或者应该修改下,加上配置项目,来选择加载(默认加载全部,但允许加载指定语言,想去github
上提个issue
)?
但是在引用的时候碰到问题。
#引用方式
import hljs from 'LIB/highlight.pack.js';
#但是我看里面的代码是立即执行函数,并没有使用export default什么的...妥妥的报错了...提示hljs不存在。
app.js:17189 Uncaught ReferenceError: hljs is not defined(…)
==== 补充下 =====
我从官网重下了另一个文件,方案2又可以使用了,难道是下载中断了?奇怪...
黄舟2017-04-11 10:29:45
这个不是因为vue引起的,而是因为webpack打包的原因。
可以使用webpack.ContextReplacementPlugin
插件来实现忽略不需要的文件以避免打包。
我这个项目中 忽略掉了moment.js
中除中文以外的语言文件。
https://github.com/Rozbo/blog
高洛峰2017-04-11 10:29:45
我很久以前也遇到过这个问题,后来照着官方文档说明,自己克隆仓库,只为js,html和css做了编译。
编译后的大小30kb,还是未压缩的,你可以直接调用我打包好的文件:
highlight.pack.js
对应的css,1kb:
highlight.css