webpack 打包优化

[gaofant101]

webpack 打包优化

前题

用React + Ant Design做的一个业务平台,在做线上发布打包的时候,发现文件比预想的要大很多(在构建项目之前就已经通过React-router配合webpack的Code Splitting对代码进行分割成多个Chunk.).

项目中所写的业务组件一共18个,项目文件夹总体大小才376kb,但是build完过后的文件大小有3.76M.这不是一个很理想的值.

查找原因

模块的引用

"dependencies": {
    "antd": "^2.10.1",
    "axios": "^0.16.2",
    "babel-polyfill": "6.20.0",
    "fontfaceobserver": "2.0.7",
    "lodash": "4.17.2",
    "rc-queue-anim": "^1.2.2",
    "react": "15.4.1",
    "react-dom": "15.4.1"
},

目测文件的引入比较大的应该是react-dom和antd,然而编译过后的文件并不知道具体情况.

webpack 命令行分析

webpack --display-modules --sort-modules-by size

这段命令的意思是: 在输出中显示所有模块,包括被排除的模块;对模块列表以某种属性排序

密密麻麻一大堆,完全不知道到底引用了多少内容;

还好牛人比较多,工具拯救这密密麻麻的字符;

http://alexkuz.github.io/webpack-chart/

webpack --json > stats.json

以 JSON 格式输出 webpack 的运行结果

从图中可以看出,大文件的组成主要分为

app                 286.815kb
core-js             238.655kb
css-loader          316.646kb
antd                419.968kb
moment              455.548kb
react-dom           506.050kb

一步步分析

app

是组件模块必须有,跳过它;

core-js

文件所关联的是babel-polyfill,2个作用都是转码器,core-js是babel-runtime里面的文件,这个应该是需要工具编译不能提取出来,但是babel-polyfill是可以提取出来的;

// webpack.base.babel.js

+externals: {
+    'babel-polyfill': 'window',
+},

// index.html
+<script src="https://cdn.bootcss.com/babel-polyfill/6.22.0/polyfill.min.js"></script>

css-loader

这里面相关的插件为什么也会出现在包文件里,这个有疑虑???难道是因为没有把css文件提取出来,需要相关loader来转义?

antd

这个库打包的时候并没有完全引入,在一开始配置的时候就已经按需加载了;

// 1.需要引入  babel-plugin-import 模块

// 2. bable 填写配置项如下:

"babel": {
    "presets": [
        [
            "latest",
            {
                "es2015": {
                    "modules": false
                }
            }
        ],
        "react",
        "stage-0"
    ],
    "plugins": [
        [
            "import",
            [
                {
                    "libraryName": "antd",
                    "style": true
                }
            ]
        ]
    ],
    ...
},

react && react-dom

这个2个文件完全可以走CDN,那么就修改webpack配置把

// webpack.base.babel.js

+externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+},

// index.html

+<script src="https://cdn.bootcss.com/react/15.4.1/react.min.js"></script>
+<script src="https://cdn.bootcss.com/react/15.4.1/react-dom.min.js"></script>

moment

这个和antd的日期控件千丝万缕,尝试了好几次始终没有剥离出来;(虽然文件也很大,但是还没弄明白为什么会绑定得很严重)

结果

编译过后的文件总体小了一点点,虽然看起来不是那么理想,但是过程对webpack有了进一步的理解,也对项目组成有了更深刻的了解;

参考

分析插件 webpack-chart

Code Splitting

webpack loaders

命令行接口(CLI)

BootCDN

ant.design docs