V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
imherer
V2EX  ›  程序员

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

  •  
  •   imherer · 2018-07-23 13:21:45 +08:00 · 5431 次点击
    这是一个创建于 2297 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    最近做一个移动端的网页,使用 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
        1
    littlewin  
       2018-07-23 13:25:04 +08:00   ❤️ 1
    插件分析下有无重复引入
    element-ui 可以按需导入

    一个原则,把一切多余的东西去掉...
    Wincer
        2
    Wincer  
       2018-07-23 13:29:46 +08:00 via Android
    gzip ?
    maichael
        3
    maichael  
       2018-07-23 13:32:15 +08:00
    1.2mb 的文件,gzip 之后也就 400 多 K 左右,还好。
    kevin1234
        4
    kevin1234  
       2018-07-23 13:35:05 +08:00
    你在四川
    zhlssg
        5
    zhlssg  
       2018-07-23 13:39:57 +08:00
    分割路由,异步组件
    v2chou
        6
    v2chou  
       2018-07-23 13:44:00 +08:00
    有没有用官方脚手架 没有的话装 webpack-bundle-analyzer 这个 然后去看看哪些地方太大了 针对性的去优化 楼上说的异步路由组件 也可以做
    VDimos
        7
    VDimos  
       2018-07-23 13:52:15 +08:00 via Android   ❤️ 1
    babel-plugin-import,按需引入
    yamedie
        8
    yamedie  
       2018-07-23 13:53:32 +08:00
    是不是改变了 url-loader 小图片打包的阈值? 还是项目里低于 10k 的小图片太多了?
    ntnyq
        9
    ntnyq  
       2018-07-23 13:56:23 +08:00
    我的 vendor 文件已经 1.9MB 了 - -!
    wunonglin
        10
    wunonglin  
       2018-07-23 13:59:31 +08:00   ❤️ 1
    你要 map 干嘛?
    panlilu
        11
    panlilu  
       2018-07-23 14:00:22 +08:00   ❤️ 1
    生产环境不需要 map
    yamedie
        12
    yamedie  
       2018-07-23 14:00:51 +08:00   ❤️ 1
    首页用不到的库, 而且支持 umd 方式加载的, 不妨在 index.html 里写个<script async src="//bootcdn...."></script>挂载到全局, 能减少 vendor 的打包体积
    imherer
        13
    imherer  
    OP
       2018-07-23 14:05:13 +08:00
    @Wincer
    @maichael
    感谢,开了 gizp,确实小了很多,只有 300k 了😀
    imherer
        14
    imherer  
    OP
       2018-07-23 14:05:25 +08:00
    @kevin1234 不在,怎么了?
    imherer
        15
    imherer  
    OP
       2018-07-23 14:06:02 +08:00
    @zhlssg
    @v2chou
    谢谢,我先研究研究
    imherer
        16
    imherer  
    OP
       2018-07-23 14:06:59 +08:00
    @yamedie 很少图片,应该是 element-ui 我全引入了,去掉之后就少了。 按楼上的开启 gzip 后小了很多
    whypool
        17
    whypool  
       2018-07-23 14:10:22 +08:00   ❤️ 1
    正常
    我这生产的 vendor 都快 6M 了

    总体的 JS 和 CSS 有 27m

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

    不过是用 ng 写的
    wly19960911
        18
    wly19960911  
       2018-07-23 14:17:50 +08:00
    这个不算很大啊,我们的项目用 angular 打包都是十几 M 起步的,主要是首屏优化的问题,如果开启 gzip 压缩,首屏只需要 600KB 的加载,如果用 aot 编译的话,还能更快。最近尝试升级中。
    wly19960911
        19
    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
        20
    cydian  
       2018-07-23 14:27:12 +08:00 via Android
    map 文件是方便调试使用的吧。无需手动引入。
    用户页面无需引入 map,调试时需要 map,在 Chrome 的调试设置中打开 map 选项,会自动引入(前提是文件中有 map 文件并且在正常的 js 中的末尾注明了 map 的引用位置。)
    wunonglin
        21
    wunonglin  
       2018-07-23 14:47:47 +08:00
    @cydian 编译出来没用,开发时有用,不编译 map 还能起到加密的用处
    cydian
        22
    cydian  
       2018-07-23 14:52:12 +08:00 via Android
    @wunonglin 我好像并没有说编译有用?
    是否误解了我的意思?
    LeungJZ
        23
    LeungJZ  
       2018-07-23 17:32:36 +08:00   ❤️ 1
    https://blog.leungjz.top/blog/5afa9d2f22039d6965f6d4c4

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

    不过,你这个完全不用那么复杂,webpack 设置生产模式然后把 devtool 关了就行
    精益求精就加上 gzip
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5892 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:59 · PVG 09:59 · LAX 17:59 · JFK 20:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.