• 请不要在回答技术问题时复制粘贴 AI 生成的内容
imherer
V2EX  ›  程序员

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

  •  
  •   imherer · Jul 23, 2018 · 5985 views
    This topic created in 2850 days ago, the information mentioned may be changed or developed.

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

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

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

    总体的 JS 和 CSS 有 27m

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

    不过是用 ng 写的
    wly19960911
        18
    wly19960911  
       Jul 23, 2018
    这个不算很大啊,我们的项目用 angular 打包都是十几 M 起步的,主要是首屏优化的问题,如果开启 gzip 压缩,首屏只需要 600KB 的加载,如果用 aot 编译的话,还能更快。最近尝试升级中。
    wly19960911
        19
    wly19960911  
       Jul 23, 2018
    @yamedie 这个不一定正确,我正在考虑这方面优化,我们这里有几个非常大的 JS 阻塞了首屏加载(暂时无法优化成 modules ),阻塞到了正常的 main.js 和 verdor.js ,app.css 的加载。

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

    目前我考虑出了一个方式是在组件 init 的方法里面添加 script 标签,然后等框架初始化完成再加载,使用 onload 事件获取 script 加载完成的信号。 但是仅仅是想想,还没有进入实战。
    cydian
        20
    cydian  
       Jul 23, 2018 via Android
    map 文件是方便调试使用的吧。无需手动引入。
    用户页面无需引入 map,调试时需要 map,在 Chrome 的调试设置中打开 map 选项,会自动引入(前提是文件中有 map 文件并且在正常的 js 中的末尾注明了 map 的引用位置。)
    shakaraka
        21
    shakaraka  
    PRO
       Jul 23, 2018
    @cydian 编译出来没用,开发时有用,不编译 map 还能起到加密的用处
    cydian
        22
    cydian  
       Jul 23, 2018 via Android
    @wunonglin 我好像并没有说编译有用?
    是否误解了我的意思?
    LeungJZ
        23
    LeungJZ  
       Jul 23, 2018   ❤️ 1
    https://blog.leungjz.top/blog/5afa9d2f22039d6965f6d4c4

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

    不过,你这个完全不用那么复杂,webpack 设置生产模式然后把 devtool 关了就行
    精益求精就加上 gzip
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2643 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 95ms · UTC 16:02 · PVG 00:02 · LAX 09:02 · JFK 12:02
    ♥ Do have faith in what you're doing.