Vue build后css和js很大的问题

胡晓
  • 104

刚刚从别人手里接手了一个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,所以这个大小也正常。

clipboard.png

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

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

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

回复
阅读 7.2k
7 个回答
✓ 已被采纳

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

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

webpack按需加载

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏