Vue项目打包文件过大

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

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