怎样配合 webpack 的 DllPlugin 使用

[Albert 理斯特]

Environment(required)

• antd@2

What did you do? Please provide steps to re-produce your problem.

webpack DllPlugin

What do you expected?

只有 rc-table 等被包含，而 rc-tree 项目中并没有用到，所以不应该被包含。例子可能不恰当，体会一下意思。

What happen?

所有组件被打成了一个 1.2M 的大包。而如果不用 DllPlugin，则 babel-plugin-import 确实能做到按需加载，大概 500k。

Re-producible online demo

NO

[afc163]

shaozj/blog#13

Try add what you need in vendor, and use babel-plugin-import meanwhile.

const path = require('path');
const webpack = require('webpack');
	
module.exports = {
  entry: {
    vendor: [
      'react',
      'react-dom',
-     'antd'
+     'antd/lib/button',
+     'antd/lib/table'
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'build', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};

[Albert 理斯特]

看上效果不明显，晚点我来开个干净点的 repo 测一下。

[yanjixiong]

我没有把antd放到dll中，使用babel-plugin-import打出来的包，一个页面也就几百K

[afc163]

#5025

[Albert 理斯特]

Common 解决的是体积过大问题。
Dll 解决的是每次开发都要编译的问题，恰好也能解决体积过大的问题。
目前试下来感觉只能 Common。

[YDJSZY]

@luoyjx 我按需引入antd，一个页面1.6M。。。

[jiangyh1024]

@afc163 antd 是不是必须和 react， react-dom 放到一个dll里面。。。 貌似分成2个dll，用了AddAssetHtmlPlugin后，插入的顺序如果是 antd在前， react, react-dom 在后的话，就会有问题。。。