Vue 使用中的小技巧

const _import = require('./_import_' + process.env.NODE_ENV)
export default new Router({
 routes: [{ path: '/login', name: '登陆', component: _import('login/index') }]})

这样组件在开发环境下就是非懒加载，生产环境下就是懒加载的了

7 vue-loader小技巧

vue-loader 是处理 *.vue 文件的 webpack loader。它本身提供了丰富的 API，有些 API 很实用但很少被人熟知。例如接下来要介绍的 preserveWhitespace 和 transformToRequire

7.1 用 preserveWhitespace 减少文件体积

有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：

<ul>
 <li>1111</li><li>2222</li><li>333</li>
</ul>

当然还有其他方式，比如设置字体的 font-size: 0 ，然后给需要的内容单独设置字体大小，目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。

{
 vue: {
 preserveWhitespace: false
 }
}

它的作用是阻止元素间生成空白内容，在 Vue 模板编译后使用 _v(” “) 表示。如果项目中模板内容多的话，它们还是会占用一些文件体积的。例如 Element 配置该属性后，未压缩情况下文件体积减少了近 30Kb。

7.2 使用 transformToRequire 再也不用把图片写成变量了

以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件。

<template>
 <div>
 <avatar :default-src="DEFAULT_AVATAR"></avatar>
 </div>
</template>
<script>
 export default {
 created () {
  this.DEFAULT_AVATAR = require('./assets/default-avatar.png')
 }
 }
</script>

其实通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件

{
 vue: {
 transformToRequire: {
  avatar: ['default-src'] }
 }
}

于是我们代码就可以简化不少

<template>
 <div>
 <avatar default-src="./assets/default-avatar.png"></avatar>
 </div>
</template>

在 vue-cli 的 webpack 模板下，默认配置是：

transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}

可以举一反三进行一下类似的配置

vue-loader 还有很多实用的 API 例如最近加入的自定义块，感兴趣的各位可以去文档里找找看。