好资源导航 » 文章资讯 » vue-cli项目优化方法- 缩短首屏加载时间

vue-cli项目优化方法- 缩短首屏加载时间

2023-09-14 16:15:06 70

最近实习的项目需求上要求不多，就学了下项目优化，主要是首屏加载太慢。

大文件定位

我们可以使用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中。

在webpack设置中添加externals，忽略不需要打包的库。

externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex',
'axios':'axios'
}

在index.html中使用cdn引入。

将JS文件放在body的最后

默认情况下，build后的index.html中，js的引入是在header中。

使用html-webpack-plugin插件，将inject的值改成body。就可以将js引入放到body最后。

varHtmlWebpackPlugin=require('html-webpack-plugin');
newHtmlWebpackPlugin({
inject:'body',
})

压缩代码并移除console

使用UglifyJsPlugin插件来压缩代码和移除console。

newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false,
drop_console:true,
pure_funcs:['console.log']
},
sourceMap:false
})

暂时只查到了这几个优化方法。

返回顶部
514930285
czq8825@qq.com

vue-cli项目优化方法- 缩短首屏加载时间

热门推荐

随机推荐