vue+webpack 前端性能优化

优化方法一： vue-router路由懒加载

     按需加载：也叫延迟加载或者懒加载，即在需要的时候进行加载，随用随载。
     使用懒加载的原因： vue是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验。（下图为懒加载的写法）

优化方法二：webpack压缩图片（减少图片大小）

     一般在vue项目中用webpack打包时，会根据webpack.base.conf.js中url-loader中设置limit大小来对图片处理，对小于limit的图片转化为base64格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，可以用image-webpack-loader来压缩图片。（通过下面代码来安装image-webpack-loader）

npm install image-webpack-loader --save-dev

然后再通过如下代码配置一下：

优化方法三：打包后的js过大，将js打包多个文件

     由于webpack打包后的js过大，以至于在加载资源时间过长。所以将文件打包成多个js文件，在需要的时候按需加载。  

    这个可以看我的另外一篇文章https://blog.csdn.net/qq_39343308/article/details/86159668

优化方法四：去掉不必要的插件

     1：打包时，将一些不必要的插件可以去掉，以防止打包一些无用的资源，导致打包后的文件过大，影响性能。
     2：在引入第三方插件的时候，如果该插件的组件过大，可以按需引入，如element-ui。
     3：使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码，使用方法如下：

plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({    warnings: false,
    compress: {
        join_vars: true,
        warnings: false,
    },
    toplevel: false,
    ie8: false,
]

这是我的一些总结，大家有更好的方法还请大家留言赐教！