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

1、1.优化一： vue-router路由懒加载 懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验。懒加载的写法：

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

3、3.安装：

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

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

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

7、7.web前端项楫默礤鲼目，静态资源放在cdn上比较多，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。参考加速荏鱿胫协nginx: 开启gzip和缓存，nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。# 开启gzip

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