问题
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

第一、二点最好是在项目开始的时候就约定好,不然后期修改起来会很麻烦,第三、四点是配置方面的,第五点是静态资源的。应该还有其他解决方案,暂时只整理出这些。

Logo

前往低代码交流专区

更多推荐