关于vue项⽬页⾯打包后⾸次页⾯加载特别缓慢的原因及解决⽅
案
javascript登录注册界面第⼀次打包vue的项⽬部署到tomcat服务器下时，发现初次加载特别的缓慢，将近20s页⾯才加载出来，完全没有开发环境上的那么流畅。主要原因是页⾯在打包后如果不进⾏相关配置会导致资源⽂件特别的⼤，⼀次想要全部加载完成会特别的耗时。这⾥简单总结⼀下⾃⼰⽤到的⼀些优化的⽅案。
⾸先我们可以安装webpack-bundle-analyzer  插件，通过这个插件我们可以在打包的时候看到打包⽂件的⼤⼩，可以明显的看出哪些⽂件⽐较⼤。
1，去掉编译⽂件中map⽂件。在编译好后，我们会看到⽂件夹下有特别多的.map⽂件，这些⽂件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过⼤，通常都不⽣成这些⽂件。
在 config/index.js ⽂件中将productionSourceMap 的值设置为false. 再次打包就可以看到项⽬⽂件中已经没有map⽂件（⽂件⼤⼩ 35MB-->10.5MB）
2，vue-router 路由懒加载
懒加载即组件的延迟加载，通常vue的页⾯在运⾏后进⼊都会有⼀个默认的页⾯，⽽其他页⾯只有在点击后才需要加载出来。使⽤懒加载可以将页⾯中的资源划分为多份，从⽽减少第⼀次加载的时候耗时。
懒加载路由配置：
⾮懒加载路由配置：
如图所⽰为通过懒加载后打包的js⽂件。⽽⾮懒加载的打包后⼀般只有⼀个app.js ⽂件。
3，使⽤gzip压缩
由于项⽬测试使⽤的是tomcat 服务器，因此这个我只在本地安装Nginx 服务器进⾏测试。在tomcat 服务器下也有压缩⽂件的⽅法，暂时没试过。
1)，在安装完依赖插件后，修改config/index.js ⽂件下 productionGzip：true ;
2)，然后在 fig.js 中添加如下代码。（⽂件⼤⼩ 10.5MB-->3.5MB）
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
// deleteOriginalAssets:true, //删除源⽂件
minRatio: 0.8
})
)
3)，最后在Nginx 下开启gzip 。
⾸先安装Nginx 服务器，然后将项⽬⽂件部署到html⽂件⽬录下，如果端⼝被占⽤，可以修改 f ⽂件中listen：somename 来修改端⼝。
开启gzip：
在fig 添加如下配置。
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
修改完成后，reload⼀下，重启服务。
4，使⽤CDN加载
在打包后发现vendor.js ⽂件占⽤内存特别⼤，这⾥⾯主要是使⽤的⼀些第三⽅库，例如 vuex,vue-router,axios，elementUI 等⽂件
我们除了在使⽤过程中单个组件引⽤，还可以使⽤CDN 加载。
通过在index.html 中直接引⼊第三⽅资源来缓解我们服务器的压⼒，其原理是将我们的压⼒分给了其他服务器站点。
5，其次打包后需要去掉代码中的console.log ，防⽌打开f12 的时候输出⽇志。　
在f.js ⽂件中设置
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
以上就是在项⽬开发过程中的⼀点积累。　

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。