vue-loader 细节

Posted 2020-10-15 HelloHello233

https://cn.vuejs.org/v2/guide/render-function.html

https://cn.vuejs.org/v2/guide/deployment.html

使用vue单文件组件都是通过vue-loader来引入的，这里记录一些细节

自动实现了template到render函数的转换

在一个vue组件中，组件的html代码可以通过template属性或render函数来指定，两者的区别在于，template会转换为render函数来执行，也就是说最终执行的都是render函数。

所以在生产环境中，可以先进行编译，这样生产环境中运行就不再需要动态转换，性能可以提高一些。

vue-loader默认做了这个转换过程，打包后的bundle文件有如下代码 ：

//...
"use strict";
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { staticClass: "wrapper" }, [
    _c("div", { staticClass: "container" }, [
      _vm.loginPage
        ? _c(
            "form",
            {
              attrs: { action: "" },
              on: {
                submit: function($event) {
                  $event.preventDefault()
                  _vm.login($event)
                }
              }
            },
// ....

.vue （单文件组件）中的template已经被转换了。实现以上过程实际上是vue-loader 内 调用了vue-template-compiler 。在vue-loader/template-compiler/index.js 中有对vue-template-compiler 进行引用

处理css

.vue 文件中 style表内的样式默认都是通过js动态写入到head中，如果这个js较慢才执行，则屏幕可能出现闪屏现象，而且对浏览器缓存不友好。解决办法是使用插件。参考如下：

https://vue-loader.vuejs.org/zh-cn/configurations/extract-css.html