느린 웹팩 빌드 시간 (고급 모듈 최적화)

Question

현재 requirejs를 기반으로하는 우리 프로젝트를 webpack으로 마이그레이션하는 데 어려움을 겪고 있습니다.

webpack을 사용하여 현재 프로젝트 상태를 복제하려는 몇 주 후에 성능 문제가 있습니다.

웹팩 버전 2.3.3을 사용 중입니다.

현재 240 개의 모듈과 58 개의 청크가 있습니다.

에서 webpack을 실행하면 파일을 수정할 때마다 개발 모드 (또는 webpack-dev-server 사용)가 표시 될 때마다 약 10 초 정도 기다려야합니다.

6185ms building modules 
65ms sealing 
2ms optimizing 
1ms basic module optimization 
12ms module optimization 
7906ms advanced module optimization 
1ms basic chunk optimization 
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
12ms module reviving 
2ms module order optimization 
3ms module id optimization 
2ms chunk reviving 
6ms chunk order optimization 
9ms chunk id optimization 
22ms hashing 
0ms module assets processing 
214ms chunk assets processing 
2ms additional chunk assets processing 
1ms recording 
0ms additional asset processing 
0ms chunk asset optimization 
2ms asset optimization 
192ms emitting 

우리는 우리의 모듈 중 하나를 modifiy 경우는, 웹팩이를 발생 :이 초기 빌드에 대한 통계입니다

{ 
    context: path.resolve(__dirname), 

    entry: { 
     'app-std': [ 
     'main', 
     'plugins/base-component', 
     'controllers/base-controller', 
     'widgets/base-widget', 
     'usertiming' 
     ] 
    }, 

    output: { 
    path: path.resolve('./dist/js'), 
    filename: '[name].js', 
    publicPath: '/js/' 
    }, 

    resolve: { 
    modules: ['public/js', 'node_modules'], 
    alias: { 
     'uuid': path.resolve(__dirname, 'public/vendor/uuid.js/dist/uuid.core.js'), 
     'jsLogger': 'js-logger', 
     'jqueryCookie': 'js-cookie', 
     'jqueryValidation': path.resolve(__dirname, 'node_modules/jquery-validation/dist/jquery.validate.js'), 
     'jQueryXDomainRequest': 'jquery-ajax-transport-xdomainrequest', 
     'dust': 'dustjs-linkedin', 
     'dust.core': 'dustjs-linkedin', 
     'dustHelpers': 'dustjs-helpers', 
     'bootstrapSelect': 'bootstrap-select', 
     'bootstrapDropDown': path.resolve(__dirname, 'node_modules/bootstrap/js/dropdown.js') 
    } 
    }, 

module: { 

    rules: [    
     { 
      test: /\.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /(node_modules)/, 
      options: { 
       presets: [['es2015', { modules: false }]/*, 'react'*/], 
       plugins: ['syntax-dynamic-import'], 
       cacheDirectory: true 
      } 
     } 
    ] 
}, 

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
      'NODE_ENV': JSON.stringify('local') 
     } 
    }), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
    }), 
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 
], 

devtool: 'cheap-module-eval-source-map', 

devServer = { 
    https: true, 
    port: 7070, 
    host: '0.0.0.0', 
    headers: { 'Access-Control-Allow-Origin': '*' } 
}, 

stats: { 
    chunks: true, 
    chunkModules: true, 
    modules: true 
} 

}

: 여기

우리 웹팩 개발 설정입니다 다시 작성하면 다음 번호를 얻습니다.

38ms building modules 
38ms sealing 
1ms optimizing 
1ms basic module optimization 
1ms module optimization 
7470ms advanced module optimization 
1ms basic chunk optimization 
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
3ms module reviving 
0ms module order optimization 
4ms module id optimization 
3ms chunk reviving 
1ms chunk order optimization 
4ms chunk id optimization 
14ms hashing 
0ms module assets processing 
1ms chunk assets processing 
1ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
1ms chunk asset optimization 
0ms asset optimization 
1ms emitting 

두 경우 모두 대부분의 시간을 소모하는 고급 모듈 최적화 고급 모듈 최적화 단계입니다. 고급 최적화이 비 프로덕션 빌드에있는 이유를 이해하지 못하고 왜 그렇게 많은 시간이 걸리는 지 알 수 없습니다.

개발 모드에서 최적화를 비활성화 할 수 있다면 시간이 많이 걸리는 단계를 더 깊이 파고들 수있는 방법이 있는지 알고 싶습니다.

감사합니다.

Answer 1

는 일부 (훨씬) 더 파고 후, 우리는 웹팩을 속이를 해킹 으로 돌아가 셨습니다. 우리 시스템에는 수십 개의 비동기로드 된 덩어리와 두 개의 분산 된 순환 종속성이있어 많은 양의 덩어리가 부모를 갖게됩니다. 그래서 시간이 많이 걸리는 작업은 기본 제공 RemoveParentModulesPlugin의 실행이었습니다. 많은 부모가 많은 청크가있는 긴 모듈 체인 때문에이 플러그인에는 추가 작업이 필요합니다.

우리의 솔루션은 로컬 컴퓨터에서 앱을 실행할 때이 최적화가 필요하지 않으므로 이 모든 모듈의 부모 인을 제거하는 새로운 맞춤 플러그인을 추가하는 것입니다.

function AvoidParentModulesOptimizationPlugin() {} 
AvoidParentModulesOptimizationPlugin.prototype.apply = function(compiler) { 
    compiler.plugin('compilation', function(compilation) { 
     compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], function(chunks) { 
      // We cheat webpack to think there are no parents to optimize 
      // so recompilation time is quite low on development mode 
      chunks.forEach(function(chunk) { 
       chunk.parents = []; 
      }); 
     }); 
    }); 
}; 

출력 타이밍 정보에

Answer 2

우리 팀도 같은 문제가 있습니다. 속도 저하는 번들에 동적로드를 제공하는 require.ensure을 사용하는 것으로 확인되었습니다. 우리는 여기

https://github.com/webpack/webpack/issues/4716

이 문제를 해결하려면 문제 플래그를했습니다, 내 동료는 바벨 플러그인을 사용하여 디바이스 환경에서 require.ensure을 벗겨 해결 방법을 발견했다. 고급 모듈 최적화 시간을 밀리 초로 줄였습니다. 해결 방법을 통해 우리의 지속적인 구축 시간이 8 초에서 1.5 초로 단축되었습니다.

https://www.npmjs.com/package/babel-plugin-remove-webpack