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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2314 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

最近做一个移动端的网页，使用 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]

请教各位大佬，该如何优化呢？

31 条回复 • 2018-07-24 10:37:38 +08:00

littlewin

2018-07-23 13:25:04 +08:00

插件分析下有无重复引入
element-ui 可以按需导入

一个原则，把一切多余的东西去掉...

Wincer

2018-07-23 13:29:46 +08:00 via Android

gzip ？

maichael

2018-07-23 13:32:15 +08:00

1.2mb 的文件，gzip 之后也就 400 多 K 左右，还好。

kevin1234

2018-07-23 13:35:05 +08:00

你在四川

zhlssg

2018-07-23 13:39:57 +08:00

分割路由，异步组件

v2chou

2018-07-23 13:44:00 +08:00

有没有用官方脚手架没有的话装 webpack-bundle-analyzer 这个然后去看看哪些地方太大了针对性的去优化楼上说的异步路由组件也可以做

VDimos

2018-07-23 13:52:15 +08:00 via Android

babel-plugin-import，按需引入

yamedie

2018-07-23 13:53:32 +08:00

是不是改变了 url-loader 小图片打包的阈值? 还是项目里低于 10k 的小图片太多了?

ntnyq

2018-07-23 13:56:23 +08:00

我的 vendor 文件已经 1.9MB 了 - -！

wunonglin

2018-07-23 13:59:31 +08:00

你要 map 干嘛？

panlilu

2018-07-23 14:00:22 +08:00

生产环境不需要 map

yamedie

2018-07-23 14:00:51 +08:00

首页用不到的库, 而且支持 umd 方式加载的, 不妨在 index.html 里写个<script async src="//bootcdn...."></script>挂载到全局, 能减少 vendor 的打包体积

imherer

2018-07-23 14:05:13 +08:00

@Wincer
@maichael
感谢，开了 gizp，确实小了很多，只有 300k 了😀

imherer

2018-07-23 14:05:25 +08:00

@kevin1234 不在，怎么了？

imherer

2018-07-23 14:06:02 +08:00

@zhlssg
@v2chou
谢谢，我先研究研究

imherer

2018-07-23 14:06:59 +08:00

@yamedie 很少图片，应该是 element-ui 我全引入了，去掉之后就少了。按楼上的开启 gzip 后小了很多

whypool

2018-07-23 14:10:22 +08:00

正常
我这生产的 vendor 都快 6M 了

总体的 JS 和 CSS 有 27m

当然要按需加载，差不多有 200 多个路由

不过是用 ng 写的

wly19960911

2018-07-23 14:17:50 +08:00

这个不算很大啊，我们的项目用 angular 打包都是十几 M 起步的，主要是首屏优化的问题，如果开启 gzip 压缩，首屏只需要 600KB 的加载，如果用 aot 编译的话，还能更快。最近尝试升级中。

wly19960911

2018-07-23 14:23:36 +08:00

@yamedie 这个不一定正确，我正在考虑这方面优化，我们这里有几个非常大的 JS 阻塞了首屏加载（暂时无法优化成 modules ），阻塞到了正常的 main.js 和 verdor.js ，app.css 的加载。

浏览器请求的线程被占据了，所以导致 angular 所需要的正常的 js 无法被加载完毕。

目前我考虑出了一个方式是在组件 init 的方法里面添加 script 标签，然后等框架初始化完成再加载，使用 onload 事件获取 script 加载完成的信号。但是仅仅是想想，还没有进入实战。

cydian

2018-07-23 14:27:12 +08:00 via Android

map 文件是方便调试使用的吧。无需手动引入。
用户页面无需引入 map，调试时需要 map，在 Chrome 的调试设置中打开 map 选项，会自动引入（前提是文件中有 map 文件并且在正常的 js 中的末尾注明了 map 的引用位置。）

wunonglin

2018-07-23 14:47:47 +08:00

@cydian 编译出来没用，开发时有用，不编译 map 还能起到加密的用处

cydian

2018-07-23 14:52:12 +08:00 via Android

@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 via Android

关于大的通用发行 js 的引用。
可通过 CDN 解决。楼上博文中提到了
@LeungJZ 使用 BootCDN 解决，可能是一个可行方案。但多次线上项目和实际测试说明，如果项目要求高，该 CDN 不是最佳的选择。支持 BootCDN 的某云已不可靠，据了解该云给员工放假 3 个月以上，屡次通过封禁域名后缀来单一的解决攻击问题，影响不小。正常访问忙时也会波动较大。

LeungJZ

2018-07-23 19:45:40 +08:00 via Android

@cydian 是的，某 cdn 会随便封域名的，我的 top 域名已经被封，已换 v2 某大神自建的 cdn。