请教各位前端大佬 js、css 文件太大问题

2018-07-23 13:21:45 +08:00
 imherer

后端出身,偶尔也写点前端代码,但是基本上都是借用现有的框架

最近做一个移动端的网页,使用 vue 2.0+element-ui

做完 build 之后发现 js 和 css 文件太大了,打开一个页面要加载 1.2M 的 js 和 css 文件

贴一下 vue build 的 log

Version: webpack 3.12.0
Time: 20721ms
                                                  Asset       Size  Chunks                    Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
               static/js/vendor.74e7738e8c0916a28a81.js     726 kB       0  [emitted]  [big]  vendor
                  static/js/app.1cd5647b901de7d30cc7.js    5.04 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.78fb8a529b8373e9e08b2d3833526bb5.css     403 kB       1  [emitted]  [big]  app
static/css/app.78fb8a529b8373e9e08b2d3833526bb5.css.map     574 kB          [emitted]
           static/js/vendor.74e7738e8c0916a28a81.js.map    2.78 MB       0  [emitted]         vendor
              static/js/app.1cd5647b901de7d30cc7.js.map    19.9 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html    1.08 kB          [emitted]

请教各位大佬,该如何优化呢?

5327 次点击
所在节点    程序员
31 条回复
wunonglin
2018-07-23 14:47:47 +08:00
@cydian 编译出来没用,开发时有用,不编译 map 还能起到加密的用处
cydian
2018-07-23 14:52:12 +08:00
@wunonglin 我好像并没有说编译有用?
是否误解了我的意思?
LeungJZ
2018-07-23 17:32:36 +08:00
https://blog.leungjz.top/blog/5afa9d2f22039d6965f6d4c4

是时候推荐一波我的博文了。
cydian
2018-07-23 18:43:53 +08:00
关于大的通用发行 js 的引用。
可通过 CDN 解决。楼上博文中提到了
@LeungJZ 使用 BootCDN 解决,可能是一个可行方案。但多次线上项目和实际测试说明,如果项目要求高,该 CDN 不是最佳的选择。支持 BootCDN 的某云已不可靠,据了解该云给员工放假 3 个月以上,屡次通过封禁域名后缀来单一的解决攻击问题,影响不小。正常访问忙时也会波动较大。
LeungJZ
2018-07-23 19:45:40 +08:00
@cydian 是的,某 cdn 会随便封域名的,我的 top 域名已经被封,已换 v2 某大神自建的 cdn。
0x4C
2018-07-23 19:48:03 +08:00
如非必要 勿增实体
cydian
2018-07-23 19:53:37 +08:00
@LeungJZ 某大神自建 CDN,可否发来看看?分享一下。
yhxx
2018-07-23 19:56:05 +08:00
CasualYours
2018-07-23 19:57:43 +08:00
1.给个 Loading 动画
2. gzip
3. cdn
LeungJZ
2018-07-23 20:23:32 +08:00
zhzer
2018-07-24 10:37:38 +08:00
分包异步加载

不过,你这个完全不用那么复杂,webpack 设置生产模式然后把 devtool 关了就行
精益求精就加上 gzip

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/473289

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX