专栏首页云瓣打包优化实践(如何Code Spliting)

打包优化实践(如何Code Spliting)

项目地址:ReactSPA

使用 webpack 插件找出占用空间较大的包

开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/analyze.html 可以看到如下效果:

按需加载

  • 对模块结合 babel 进行按需加载;
  • 测试 day.js 替代 moment.js. 实际上 moment.js 也使用按需加载 了(实验减少了 40KB+),所以最终结果相差不大;

code-spliting

使用 MiniCssExtractPlugin 插件分离 JavaScript 和 Css 文件:

  823.94 KB           build / static / js / main.496a38b7.js
  8.2 KB              build / static / css / main.css

code-spliting 官方给出三种方案,分别如下:

方案一:在 entry 处增加打包入口

方案一的缺点如下:

  • 如果多个文件引人了相同的包(比如 lodash),引用的包会被分别打包两次;
  • 这种方案不够灵活,无法根据逻辑动态分割代码;

所以方案一通常会结合方案二、方案三一起使用,方案一的配置大致如下:

entry: [require.resolve('./polyfills'), paths.appIndexJs],

// 也可以写成

entry: {
  polyfill: require.resolve('./polyfills'),
  IndexJs: paths.appIndexJs,
},

方案二:使用插件 SplitChunkPlugin

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
      },
    },
  },

打包效果如下:

  723.96 KB  build/static/js/vendor.a9289a29.chunk.js // node-modules 模块
  98.72 KB   build/static/js/main.7bcaca24.js
  8.2 KB     build/static/css/1.css

此时将 node-modules 里的包打包成了一个大块头,这样对加载仍然是不友好的。解决方案为:将核心的框架单独打包出来,剩余模块异步加载,比如可以使用 bundle-loader)。

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor1: { // 主要模块
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
          name: 'vendor1',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
        vendor2: { // 次要模块
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor2',
          maxAsyncRequests: 5,
          priority: 9,
          enforce: true,
          reuseExistingChunk: true,
        },
      },
    },
  }

打包效果如下:

  588.06 KB  build/static/js/vendor2.d63694f4.chunk.js
  133.17 KB  build/static/js/vendor1.0d40234c.chunk.js
  98.72 KB   build/static/js/main.b7a98d03.js
  8.2 KB     build/static/css/2.css

可以看到此时 node_modules 包已经被拆分成了核心模块和非核心模块。

使用动态引入语法 import()

首先使用官网安利的 react-loadable 这个包,它的思想是根据路由(代替模块)进行代码的动态分割,异步加载所需要的组件,从而极大地提高页面加载速率。

在路由界面进行如下配置:

const Loading = () => <div>Loading...</div>

const Home = Loadable({
  loader: () => import('../pages/home'),
  loading: Loading,
})

// 类似这样使用路由
<Router>
  <Route path="/home" component={Home} />
  <Route path="/follow" component={Follow} />
  <Route path="/tools" component={Tools} />
  <Route path="/music" component={Music} />
  <Route path="/todo" component={Todo} />
  <Route path="/album" component={Album} />
  <Route path="/editor" component={Editor} />
  <Route path="/todoList" component={TodoList} />
  <Route path="/searchEngine" component={Search} />
  <Route path="/waterfall" component={Waterfall} /
</Router>

我们来看代码分割后的结果:

这里测试结果是去掉方案二的配置后进行的,实验对比后,使用方案三的方式稍优于方案二、三共同使用的方式。

  235.89 KB  build/static/js/IndexJs.57ee1596.js
  225.94 KB  build/static/js/15.c09a5919.chunk.js
  138.18 KB  build/static/js/17.30c26142.chunk.js
  82.71 KB   build/static/js/1.667779a6.chunk.js
  57.55 KB   build/static/js/16.f8fa2302.chunk.js
  16.46 KB   build/static/js/2.e7b77a5d.chunk.js
  14.79 KB   build/static/js/18.cad1f84d.chunk.js
  12.51 KB   build/static/js/0.73df11a7.chunk.js
  11.22 KB   build/static/js/13.19501c58.chunk.js
  8.34 KB    build/static/js/5.33fd1c35.chunk.js
  7 KB       build/static/js/8.9f1d0a47.chunk.js
  5.86 KB    build/static/js/12.24f0a7ec.chunk.js
  5.06 KB    build/static/css/18.css
  4.97 KB    build/static/js/polyfill.1c61a660.js
  3.58 KB    build/static/js/7.dd4976e3.chunk.js
  3.53 KB    build/static/js/14.16f6b811.chunk.js
  3.42 KB    build/static/css/17.css
  2.98 KB    build/static/js/10.464a61e4.chunk.js
  2.02 KB    build/static/js/11.3728d5a9.chunk.js
  1.45 KB    build/static/js/6.92fbac58.chunk.js
  1.13 KB    build/static/js/9.59160a3a.chunk.js

有多少个路由,react-loadable 库就自动帮我们多拆分了多少个包文件。可以想象在越大的项目中,这种动态引人库的好处越明显。

而且可以很清晰的看到,当我们在 /home 下,只有 home 组件是被加载的,其他组件并没有被加载!

那么 react-loadable 的神秘之力是如何实现的呢,它本质上是个运用了属性代理的高阶函数,通过在高阶函数里配合 import() 加进各种状态,从而达到异步加载模块的效果。

参考文献

code-splitting Code-Splitting(react)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端中常见数据结构小结

    数据结构在开发中是一种编程思想的提炼,无关于用何种语言开发或者是哪种端开发。下列将笔者涉猎到的与前端相关的数据结构案例作如下总结:

    牧云云
  • webpack配置React开发环境(上)

    Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Web...

    牧云云
  • hexo摸爬滚打之进阶教程

    本文首发在我的个人博客:http://muyunyun.cn/ 写博客有三个层次,第一层次是借鉴居多的博文,第二层次是借鉴后经过消化后有一定量产出的博文,第三...

    牧云云
  • 前端缓存

    https://juejin.im/post/5a098b5bf265da431a42b227

    城市中的游牧民族
  • smartClient 1--框架介绍

    一、是什么(以下简称SC)     smartClient 是一个基于web技术的开发框架,主要包括: 一个无需安装的 Ajax/HTML5 客户端引擎 UI组...

    用户1148399
  • 利用js文件反弹shell

    前两天在freebuf上看到一个利用Ink文件触发攻击链的文章,确实佩服作者的脑洞。

    洛米唯熊
  • Webpack第三天

    我们已经能打包能启动了,现在我们要继续开发。开发的时候我们要一直刷新才能出现,这很浪费时间,而webpack自带了热更新。

    wade
  • 在微信小游戏中使用three.js显示3D图形

    笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏...

    bering
  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • RequireJS实例分析

      随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由...

    用户1154259

扫码关注云+社区

领取腾讯云代金券