Vue项目打包文件过大(优化)
问题Vue项目打包文件过大,项目加载慢,前端可以做哪些优化?分析其实,这是项目的性能优化,一般在项目开始开发之前就应该考虑,但在实际开发中,开发之前会被忽略。解决方案如下一、懒加载什么叫懒加载?在需要的时候进行加载,随载随用。常见的有:路由、图片等。例子:官方路由懒加载{path: "/timeAxis",name: "timeAxis",component: () =>import ('@
·
问题
Vue项目打包文件过大,项目加载慢,前端可以做哪些优化?
分析
其实,这是项目的性能优化,一般在项目开始开发之前就应该考虑,但在实际开发中,开发之前会被忽略。
解决方案如下
一、懒加载
什么叫懒加载?在需要的时候进行加载,随载随用。
常见的有:路由、图片等。
例子:
官方路由懒加载
{ path: "/timeAxis", name: "timeAxis", component: () => import ('@/views/xxx'), }
二、按需加载
什么叫按需加载?根据需要去加载资源。
常见的有:UI库等。
三、不生成.map文件
配置里productionSourceMap设置成为false,能差不多减少一半的体积。
四、通过cdn方式引入
将不怎么会改动的第三方包通过<script>标签引入,并且在webpack.base.config.js中的externals添加包名,表示不打包的文件,去除在main.js中的引用。(这个方法可以解决打包后app.js、vendor.js文件过大的问题。)
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', },
五、图片压缩
可利用一些网站对大体积图片进行压缩,例如:tinypng
第一、二点最好是在项目开始的时候就约定好,不然后期修改起来会很麻烦,第三、四点是配置方面的,第五点是静态资源的。应该还有其他解决方案,暂时只整理出这些。
更多推荐
已为社区贡献8条内容
所有评论(0)