一、问题
- 使用ElementUI后,相关图标出不来;
- 在项目中部分页面的css中使用了backgroud-image:url(xxx/xxx.jpg),在生产环境中不显示;
- ElementUI体积过大,导致Webpack打包后的js有1M多;
二、目标
- 找出原因,解决该bug;
- 找到替代方案,方便兼容几种类型的图片加载;
- ElementUI改成按需加载;
三、方案
- 在DEV模式下,访问项目,发现会报:"failed to decode downloaded font…"异常(图片来自互联网)。
此时才搞明白,ElementUI的图标出不来就是因为字体加载不出来所致。解决字体的加载就解决该问题了。
解决网上资料,有人说是引用路径不对,结果我发现是在ElementUI的css中引入字体的,我们根本没法直接改动。后面看到有人说可能是自己的file-loader重复定义冲突所致,仔细一看,果不其然!去掉后面重复的一个url-loader和file-loader后,问题彻底解决。
- 问题2的原因是css-loader在加载时,会先校验图片路径正不正确,而生产环境和DEV环境下,图片的相对路径并不一致。而且 backgroud-image:url(…)这种图片引用方式会直接把图片导出来,和import img from ‘xxx.jpg’这种方式效果一致。import这种方式要求图片放在根路径下。
代码结构如下:
所以在DEV模式能够正常加载,但是生产环境就无法加载。网上说的修改publicPath的方案并不能解决我的问题。最后我只能让背景图片存在根目录,其它图片在assets目录下。我的publicPath为’’。
至此,问题2算是解决了,但是没有找出更好的替代方案。比如图片全部都在assets下,不需要单独处理背景图片…后续继续努力吧! - 问题3比较好解决。曾经在其它项目中有过按需引用的经验。好在官方文档也比较给力。详细步骤如下:
a. 修改vue启动的js。改成自己实际用到的ElementUI组件:
b. 修改项目的.babelrc文件为:
{
"presets": [
["es2015", {
"modules": false
}], "stage-3"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
四、效果
- js由1.4M变成了900k:
全量引用时:
按需引用后:
五、总结
- 先确定目标再去做,做的时候尽量按照完美的方案来做,比如按需引用,对功能没有任何影响,但是加载也会变快;
- 多去甄别不同的方案,每个人的情况也不尽相同,要有自己的认知,一般来说越简洁越好。
六、参考
[1] https://element.eleme.io/#/zh-CN/component/quickstart
[2] https://segmentfault.com/q/1010000019424211/