阅读 3604

antd项目各种webpack打包方案

前言

项目后台使用antd的组件,一直感觉很好很强大。无奈整体打包的话太大,光是antd的js就有990k(3.1.1),所以着手优化打包后的大小。

使用官方推荐的babel-plugin-import插件

基本上前期组件使用少的情况下,这个插件完美解决了问题。这个插件其实是优化了写法,将本应该

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
复制代码

优化成了

import { Button } from 'antd';
复制代码

本质上是单独引入了Button组件,打包的时候当然只会将Button组件打进去。

模板初始情况

  1. 使用CommonsChunkPlugin插件将react,,react-dom,react-router-dom包单独导出成vendor.js。

  2. 使用babel-plugin-import插件按需引入antd组件。

  3. 项目初始包含两个页面,使用HashRouter:主页(Home.js)->app.js和使用bundle-loader异步加载的列表页(List.js)->app-list.js

    import ListC from 'bundle-loader?lazy&name=app-list!./List';
    const List = Bundle(ListC)
    ...
    <Route path={`${match.url}/list`} component={List} />
    复制代码
  4. 模板初始时没有使用任何ui组件,build后各资源大小如下:

     app.js->15k
     app-list->1.5k
     vendor.js->150k(包含react,react-dom,react-router-dom)
    复制代码

使用antd组件配合异步加载(以Button组件为例,List和Home里均使用了Button)

  1. 只在List组件里使用Button组件

     app.js->15k
     app-list->99k
     vendor.js->150k
    复制代码
  2. 只在Home组件里使用Button组件

     app.js->113k
     app-list->1.5k
     vendor.js->150k
    复制代码
  3. Home和List组件都使用Button组件

     app.js->113k
     app-list->1.63k
     vendor.js->150k
    复制代码

结论:可以看出antd配合异步加载Button组件不会重复打包,如果Home和List组件都使用Button组件,只在app.js里打包了Button组件

使用commonChunk将antd打入vendor,同时开启antd按需引入(以Button组件为例,List和Home里均使用了Button)

app.js->94k
app-list->1.64k
vendor.js->1.38M !!!
复制代码

结论:也就是说完整的antd被打入vendor,而且按需引用Button组件的时候又打包了一次

使用commonChunk将antd打入vendor,同时关闭antd按需引入:

app.js->15.2k
app-list->1.61k
vendor.js->1.38M !!!
复制代码

结论:完整的antd被打入vendor,引用Button的时候虽然没有重复打包,但是我们强烈需要按需引入,毕竟antd 990k大。

开启dll打包(react,react-dom,react-router-dom),开启CommonsChunkPlugin插件(react,react-dom,react-router-dom),开启antd按需引用

app.js->113k
app-list->1.61k
vendor.js->1.6k
common-1.0.0.js->161k
复制代码

结论:DllPlugin插件其实与CommonsChunkPlugin作用差不多,区别是CommonsChunkPlugin每次重新打包打出的vendor.js都会改变,而DllPlugin插件打出的common.js是不变的。如果两个插件同时使用并且打包的库也相同(react,react-dom,react-router-dom),那么commonChunk打出的vendor内容基本上会全到common.js里。antd按需引用的组件没有被重复打包,此种情况也就是说可以省掉commonChunk组件打react,react-dom,react-router-dom的步骤了。

增加多入口(app.js app2.js),关闭commonChunk插件,开启dll,开启antd按需引用

app.js->114k(使用Button组件)
app2.js->4.88k(未使用Button组件)
app-list->1.63k(使用Button组件)
app-list2->105k(使用Button组件)
common-1.0.0.js->161k
复制代码

结论:dll插件可以达到commonChunk的作用,然后用此脚手架为模板新开一个项目,发现common-1.0.0.js在另一个项目中也通用,直到dll插件中打的库发生改变(react,react-dom,react-router-dom)

使用webpack的externals属性,将react,react-dom,react-router-dom通过script引入,不使用antd任何组件,不使用commonChunk和dll.

app.js->12.4k(不使用Button组件)
复制代码

使用webpack的externals属性,将react,react-dom,react-router-dom通过script引入,使用antd Button组件

app.js->115.k(使用Button组件)
app-list->1.63k(使用Button组件)
复制代码

使用webpack的externals属性,将react,react-dom,react-router-dom,antd通过script引入,使用antd Button组件

app.js->16.6k(使用Button组件)
app-list->1.61k(使用Button组件)
复制代码

结论:此种方法成功把antd剥离出去了,但是html里需要引入antd.min.js和antd.min.css和moment.min.js!!!,moment.min.js必须放在antd之前,否则datepicker组件会报错。同时,.babelrc文件里需要去掉babel-plugin-import的使用,如果不去掉,app.js会有115k,也就是说antd的Button组件还是会被打进了app.js里。

综上:

  1. 使用AutoDllPlugin插件替代webpack自带的dllPlugin插件更加方便。
  2. 使用AutoDllPlugin与commonChunk插件都可以,如果不要求多项目公用基础js的话。
  3. 使用extarnals无法使用按需加载。
  4. commonChunk+antd按需引入+页面按需加载使用最方便。
  5. 使用页面按需加载时,为防止组件被多个页面重复打包,可将组件放到根组件上。例如:app-list与app-list页面均使用Button,但根组件app.js没有使用,那么app-list和app-list都会把Button打进各自的js里,打包时间将会延长,可将Button在app.js里使用下,这样app-list和app-list都不会在打Button了。

项目地址

关注下面的标签,发现更多相似文章
评论