本篇文章所说的内容是vue-cli项目中如何缩短首屏加载时间以提高效率，代码都非常详细，有需要的朋友可以看一下。
主要是首屏加载太慢。
大文件定位
我们可以使用webpack可视化插件webpack bundle analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。
安装
npm install --save-dev webpack-bundle-analyzer
在webpack中设置如下，然后npm run dev 的时候默认会在8888端口显示。
const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin;module.exports = {  plugins: [    new bundleanalyzerplugin()  ]}
js文件按需加载
如果没有这个设置，项目首屏加载时会加载整个网站所有的js文件，所以将js文件拆开，点击某个页面时再加载该页面的js是一个很好的优化方法。
这里用到的就是vue的组件懒加载。在router.js中，不要使用import的方法引入组件，使用require.ensure。
import index from '@/components/index'const  index = r => require.ensure( [], () => r (require('@/components/index'),'index'))//如果写了第二个参数，就打包到该`/js/index` 的文件中。//不写第二个参数，就直接打包在`/js` 目录下。const  index = r => require.ensure( [], () => r (require('@/components/index')))
使用cdn
打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn 直接引入到根目录的index.html中。
在webpack设置中添加externals，忽略不需要打包的库。
externals: {    'vue': 'vue',    'vue-router': 'vuerouter',    'vuex': 'vuex',    'axios': 'axios'  }
在index.html中使用cdn引入。
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>  <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script><script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>  <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
将js文件放在body的最后
默认情况下，build后的index.html中，js的引入是在header中。
使用html-webpack-plugin插件，将inject的值改成body。就可以将js引入放到body最后。
var htmlwebpackplugin = require('html-webpack-plugin');
new htmlwebpackplugin({
  inject: 'body',
})
压缩代码并移除console
使用uglifyjsplugin 插件来压缩代码和移除console。
new webpack.optimize.uglifyjsplugin({  compress: {    warnings: false,    drop_console: true,    pure_funcs: ['console.log']  },  sourcemap: false})
相关推荐：
怎么提速优化vue-cli的代码
实例详解vue-cli优化的webpack配置
怎样优化vue项目
以上就是vue-cli项目中如何缩短首屏加载时间以提高效率的详细内容。