Все компоненты в комплекте - PullRequest
Новая
       16

Все компоненты в комплекте

0 голосов
/ 31 октября 2018

Я только что перешел на webpack 4 и babel 7 и заметил, что мой пакет значительно увеличился в размерах.

используя анализатор пакетов, я вижу antd, и его зависимости составляют около 1 МБ моего пакета объемом 1.7 МБ. enter image description here

При связывании в режиме разработки я вижу, что все компоненты antd включены, хотя в моем приложении в настоящий момент импортирована одна кнопка 

import { Button } from 'antd';
....

Как я могу загрузить только то, что мне нужно? Вот мои соответствующие конфиги 

//webpack.config
{
  devtool: false,
  mode: 'production',
  entry: [
    '@babel/polyfill',
    'antd/dist/antd.css',
    './js/router',
    './css/test.less',
  ],
  output: {
    path: path.resolve(__dirname, './plugins/js'),
    filename: 'app.js',
  },
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
....

И 

//babelrc
{
  "presets": [
      ['@babel/preset-env', { 
        modules: false, 
        useBuiltIns: 'entry', 
        targets: { 
          chrome:"58", ie: "11" 
        } 
      }],
      '@babel/preset-react',
  ],
  "plugins": [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-transform-modules-commonjs',
      ["import", { "libraryName": "antd", "style": "css" }]
  ]
}

1 Ответ

0 голосов
/ 05 ноября 2018

В режиме разработки по умолчанию опция sideEffects:true отключает дрожание дерева. Проверьте в производстве, чтобы увидеть, работает ли это. Чтобы включить в разработке: - использовать импортный экспорт - @ babel / preset-env установлен на modules: false. - Добавьте sideEffects:false в pkg.json. В качестве альтернативы массив может принимать относительные, абсолютные и глобальные шаблоны для соответствующих файлов.

Ссылка: https://webpack.js.org/guides/tree-shaking/#conclusion

...