优化Vue项目编译文件大小的方法步骤

"presets": ["es2015"]}

之后修改

webpack.prod.conf.js

：

module: {
  loaders: [{
    'loader': 'babel-loader',
    'test': /.js$/,
    'exclude': /node_modules/,
    'query': {
      'plugins': ['lodash'],
      'presets': ['es2015']    }
  }]}

这之后便可以实现按需加载

lodash

了。重新进行分析，会发现 lodash 部分的大小已经可以忽略不计了。

对于其他的，如

Element-UI

之类的第三方库，如果我们只使用到了为数不多的组件，建议查找相应的按需加载插件和配置方式，这样可以极大的减少该部分编译的大小。

路由懒加载

当我们配合 Vue-Router 构建单页应用时，大量的组件会导致首屏加载缓慢，如官方文档所言：

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

只需将原有的：

import Test from '../pages/test'
export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]});

改为：

const Test = () => import('../pages/test')
export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]});

注意首行的不同。

第三方库懒加载

在实际开发中，可能存在这样的场景：

在某个组件/文件中需要使用 moment 第三方库来进行时间处理，但其他组件根本用不到。

如果我们这样引入 moment：

import moment from 'moment'
export default {
  data () {
  },
  mounted () {
  }
}

则该库会合并在

vendor.js

中，造成首屏加载缓慢。

为了解决这个问题，我们可以改成以下引入方式：

export default {
  name: '',
  beforeCreate () {
    import('moment').then(module => {
      this.moment = module;
    });
  },
  data () {
    return {
      moment: null
    }
  }
}

这种方式可以使得

moment

库只在该组件使用处引入。注意，这种方式需要考虑「

moment

调用时机与