如何利用 webpack 来优化前端性能

1、优化一： vue-router路由懒加载

     懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。

     使用懒加载的原因：  vue是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验。

懒加载的写法：

2、非懒加载的路由配置：

3、安装：

4、

配置：

      在webpack.base.conf.js文件中引入配置（此项目我用的是脚手架搭建的，所以是webpack.base.conf.js）

5、

打包后的js过大，将js打包多个文件

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

优化方案：

6、

去掉不必要的插件

     1：打包时，将一些不必要的插件可以去掉，以防止打包一些无用的资源，导致打包后的文件过大，影响性能。

     2：在引入第三方插件的时候，如果该插件的组件过大，可以按需引入，如element-ui。
     3：使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码，使用方法如下：

7、

web前端项目，静态资源放在cdn上比较多，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。

参考加速nginx: 开启gzip和缓存，nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。

# 开启gzip

8、

 服务器缓存

     为了提高服务器获取数据的速度，nginx缓存着静态资源是非常必要的。如果是测试服务器对html应该不设置缓存，而js等静态资源环境因为文件尾部会加上一个hash值，这可以有效实现缓存的控制。