webpack 打包优化

Question

现 bundle 分析如下图所示：

对于 antd ，按官方文档使用了按需加载
对于 moment，忽略了本地化的内容
使用了 UglifyJsPlugin

单入口文件，打包后还有 1.6M，希望进一步压缩大小。
echarts 不知道怎么处理好，zrender 是 echarts 依赖的动画库。

配置文件如下：

var path = require('path');
const webpack = require('webpack');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;//bundle大小分析

module.exports = {
    devServer: {
        port: 8080,
        compress: true, //启用 gzip 压缩
        disableHostCheck: true
    },
    entry: {
        router: './router/router.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                exclude: /(node_modules)/, // 路径中含有 node_modules 的不解析
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: ["react", "es2015", "stage-0"],
                        plugins: [//mobx的转码插件
                            "transform-decorators-legacy",
                            "transform-class-properties",
                            ['import',{'libraryName':'antd','style':'css'}] //antd按需加载组件和样式
                        ]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ],
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ],
            },
        ]
    },

    plugins: [
        new webpack.DefinePlugin({  //定义生成环境，不然压缩会警告
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({  //压缩文件，效果杠杠的
            beautify: false,// 最紧凑的输出
            comments: false,// 删除所有的注释
            compress: {
                warnings: false,// 在UglifyJs删除没有用到的代码时不输出警告
                drop_console: true,// 删除所有的 `console` 语句 还可以兼容ie浏览器
                collapse_vars: true,// 内嵌定义了但是只用到一次的变量
                reduce_vars: true,// 提取出出现多次但是没有定义成变量去引用的静态值
            }
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), //moment会将所有本地化内容和核心功能一起打包，使用 IgnorePlugin 忽略本地化内容
        new BundleAnalyzerPlugin(),//bundle大小分析
    ]
};

我试图通过 external echarts 然后在html中通过CDN的形式引入，但发现结果并没有实质性的影响。

另附上 antd 和 echarts 这两个大头的打包体积详情图：

所有 css 文件已经单独打包了，缩小了首屏加载的时间，不过 echarts 仍然不知道怎么处理好。

Answer 1

使用webpack 拆包功能，从bundle.js中拆分出多个chunk.js，实现js的按需加载，可以提高首屏加载速度。不同的webpack版本按需加载配置方式不同，你可以根据自己使用的版本查一下具体配置。关键字：webpack code splitting。再附上一篇文章供参考：http://www.alloyteam.com/2016...