主要是首屏加载太慢。定位大文件我们可以使用webpack可视化插件WebpackBundleAnalyzer查看项目的js文件大小，然后有目的地解决超大的js文件。安装npminstall--save-devwebpack-bundle-analyzer并在webpack中设置如下，然后npmrundev时默认显示在8888端口。constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={plugins:[newBundleAnalyzerPlugin()]}JS文件按需加载如果没有这个设置，则加载整个网站时项目首屏是加载JS文件，所以将JS文件拆解，点击页面时加载页面JS是一个很好的优化方式。这里用到的是vue组件的懒加载。在router.js中，不要使用import方式引入组件，使用require.ensure。importindexfrom'@/components/index'constindex=r=>require.ensure([],()=>r(require('@/components/index'),'index'))//如果写的第二个参数被打包到/JS/index文件中。//如果不写第二个参数，会直接打包到`/JS`目录下。constindex=r=>require.ensure([],()=>r(require('@/components/index')))使用cdn打包时，将vue、vuex、vue-router、axios等替换为国内的bootcdn直接导入到根目录的index.html中。在webpacksettings中添加externals，忽略不需要打包的库。externals:{'vue':'Vue','vue-router':'VueRouter','vuex':'Vuex','axios':'axios'}在index.html中使用cdn导入。把js文件放在body的最后默认在build后的index.html中，js的引入是在页眉中间。使用html-webpack-plugin插件更改injecttobody的值。您可以将js导入到正文的末尾。varHtmlWebpackPlugin=require('html-webpack-plugin');newHtmlWebpackPlugin({inject:'body',})压缩代码并移除控制台使用UglifyJsPlugin插件压缩代码并移除控制台。newwebpack.optimize.UglifyJsPlugin({compress:{warnings:false,drop_console:true,pure_funcs:['console.log']},sourceMap:false})参考文章
