JavaScript webpack 打包,怎么将体积降下来?

lukefan · February 07, 2021 · Last by lukefan replied at February 21, 2021 · 866 hits

我的应用里面,使用了 react、apollo graphql、jQuery、bootstrap 等等一大堆的库, 没多少代码,webpacker:compile 出来的包,就 1.6M 了。 怎么调整,可以页面通过 cdn 调用各种库,只将自己的代码打包,并压缩到尽可能小呢?

你这个技术栈有点杂

开启 gzip 了吗?分成多个文件加载,反而会减慢页面加载速度

Reply to zhongsheng

分开加载,放在 cdn 上,每次更新自己的代码,库文件,很多电脑都已经在访问其他网页的时候下载过了。

现在 ruby on rails 的前端,越来越依赖 javascript 了,webpack 精简的各种文章都是完全针对 nodejs 写的。完全搞不明白。

这一块,ruby on rails 的文档就非常少了。

咱们是修改 config/webpack/environment.js 吗?有例子吗?

Rails 默认带了 webpack,但引入重前端的库是你自己的选择。重前端造成静态文件体积庞大就是它的痛点之一。

怎么分割代码可以看看 https://webpack.js.org/guides/code-splitting/

关于修改 webpacker 配置,因为 webpacker 预先设置了一些默认配置,要基于这些默认配置再修改,改起来没有原生那么直观,找到一个相关文章 https://rossta.net/blog/how-to-customize-webpack-for-rails-apps.html

至于通过第三方 CDN 引用库,我不清楚命中率有多高,如果用户没缓存过依然要下载。另外的问题是我不相信第三方 CDN 的安全性和稳定性,通常不考虑。

  1. 通过 webpack 配置 tree shaking 也可以减少体积。

  2. 通过 webpack 配置,增加多个 entry, 进行代码分割,但是太麻烦,要修改配置。

  3. cdn 也是个办法。

  4. 检查哪些库再引用时进行全量加载的,通过分析的插件查看。

  5. 以下采用 懒加载

    1. 不是当前 react-route 路由
    2. 不是当前页的组件之类

比较好用的库 loadable-components

我用阿里云的 OSS 和 CDN,目前运转良好。

Reply to Rei

我是个业余程序员,能够让网页稍微好看一些,也就可以了。于是引入了一大堆懒人库。 至于分拆 webpack,并调用 cdn 提速的问题。只是做一个思考,并没有真的要去写一个网站上线。 我看了你发的文档链接,看来确实是需要修改 config/webpack/environment.js,感谢,还没来得及测试。

Reply to lukefan

折腾过重前端之后,可以看看 https://hotwire.dev/ ,相信会对它提供的价值更有感触。

Reply to Rei

最近很多人都在推荐这个,还没看过。 最近玩儿了一下 react 和 flutter。还没玩儿到这个。慢慢来。 flutter 是和很二的东西,必须要切换到 beta 的版本才可以--enable-web。但是 web 下没法调用 graphql。很傻。

You need to Sign in before reply, if you don't have an account, please Sign up first.