怎么在vue-cli项目中缩短首屏加载时间

这篇文章将为大家详细讲解有关怎么在vue-cli项目中缩短首屏加载时间，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

墨脱网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

安装

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引入。

将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项目中缩短首屏加载时间就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。