Vue build后css和js很大的问题

Question

刚刚从别人手里接手了一个vue.js的项目，是个后台管理系统，大概有30来个界面，功能基本就是增删改查+echarts报表，界面风格都很统一那种。

我个人搞前端比较少，以前没接触过es6这类的东西，都是基本的html css js撸一下，jquery+bootstrap这类技术。看了两天vue的doc，照猫画虎开发起来倒也没有问题，目前的问题就是build之后发布上去，第一次访问很慢。

chrome的network看了一下，发现是第一次访问是把app.js和app.css一次性全部下载下来。我打开app.js和app.css看了一下内容，跟想象的一样，是把用到的所有js都打包了，包括用到的各种库和自己写的js，所以这个大小也正常。

然而这种方法显然不太好吧，按常理来说不是应该按需加载么，第一次访问就把echarts那些东西搞下来貌似毫无意义吧。

在网上查了一下，目前倒是有一种解决方法就是使用cdn，把依赖放到html，但是这只是解决了传输问题，一定程度上可以提升，但是还是存在第一次访问就加载全部的问题哦。

想问问大家这种情况，正常是怎么处理的，有没有办法不要一次性加载这么多东西。

Answer 1

1.路由懒加载组件
2.把第三方库单独打包出来 WebpackDLLPlugin & WebpackDllReferencePlugin
3.第三方依赖打包出来后走cdn
4.服务器nginx开启gzip
5.可以开启WebpackBundleAnalyzer查看依赖关系针对性进行优化 有些依赖其实是没用上的

Answer 2

这就是取舍的问题了，webpack支持按需加载 https://webpack.js.org/api/module-methods/#require-ensure

Answer 3

webpack按需加载

import('something').then(something => {
    // something.xxx();
});

Answer 4

vue项目可以使用 路由懒加载

Answer 5

页面太多的话，可以实现按需加载。
看看这个：https://segmentfault.com/q/10...

Answer 6

npm run build --report查看打包后文件都包含什么，首先确保是不是按需加载了

Answer 7

ggggggggggggg