Vue.js实战——Vue+ElementUI bug定位及按需引用压缩优化_19

一、问题

1. 使用ElementUI后，相关图标出不来；
2. 在项目中部分页面的css中使用了backgroud-image:url(xxx/xxx.jpg)，在生产环境中不显示；
3. ElementUI体积过大，导致Webpack打包后的js有1M多；

二、目标

1. 找出原因，解决该bug；
2. 找到替代方案，方便兼容几种类型的图片加载；
3. ElementUI改成按需加载；

三、方案

1. 在DEV模式下，访问项目，发现会报："failed to decode downloaded font…"异常（图片来自互联网）。
   此时才搞明白，ElementUI的图标出不来就是因为字体加载不出来所致。解决字体的加载就解决该问题了。
   
   解决网上资料，有人说是引用路径不对，结果我发现是在ElementUI的css中引入字体的，我们根本没法直接改动。后面看到有人说可能是自己的file-loader重复定义冲突所致，仔细一看，果不其然！去掉后面重复的一个url-loader和file-loader后，问题彻底解决。
   
2. 问题2的原因是css-loader在加载时，会先校验图片路径正不正确，而生产环境和DEV环境下，图片的相对路径并不一致。而且 backgroud-image:url(…)这种图片引用方式会直接把图片导出来，和import img from ‘xxx.jpg’这种方式效果一致。import这种方式要求图片放在根路径下。
   代码结构如下：
   
   所以在DEV模式能够正常加载，但是生产环境就无法加载。网上说的修改publicPath的方案并不能解决我的问题。最后我只能让背景图片存在根目录，其它图片在assets目录下。我的publicPath为’’。
   
   至此，问题2算是解决了，但是没有找出更好的替代方案。比如图片全部都在assets下，不需要单独处理背景图片…后续继续努力吧！
3. 问题3比较好解决。曾经在其它项目中有过按需引用的经验。好在官方文档也比较给力。详细步骤如下：
   a. 修改vue启动的js。改成自己实际用到的ElementUI组件：
   
   b. 修改项目的.babelrc文件为：

{
  "presets": [
    ["es2015", {
      "modules": false
    }], "stage-3"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

四、效果

1. js由1.4M变成了900k：
   全量引用时：
   
   按需引用后：
   

五、总结

1. 先确定目标再去做，做的时候尽量按照完美的方案来做，比如按需引用，对功能没有任何影响，但是加载也会变快；
2. 多去甄别不同的方案，每个人的情况也不尽相同，要有自己的认知，一般来说越简洁越好。

六、参考

[1] https://element.eleme.io/#/zh-CN/component/quickstart
[2] https://segmentfault.com/q/1010000019424211/