webpack으로 패키징된 대용량 파일을 처리하는 방법

이번에는 webpack으로 패키징된 대용량 파일을 처리하는 방법과 webpack으로 패키징된 대용량 파일을 처리하는 방법에 대한 Notes에 대해 알려드리겠습니다.

최적화 비교:

최적화 전: index.html에는 2M 이상의 크기를 가진 main.js 파일이 포함되어 있습니다.

　 최적화 후: index.html에는 main.js, commons.js,charts.js 및 other.js가 도입됩니다. main.js를 균등하게 나누는 목적을 달성하기 위해. 각 파일은 300k 내에서 제어됩니다. (만족하신다면 100k도 문제 없습니다.)

사용된 다양한 라이브러리 및 도구:

vue, webpack, babel, highcharts, echarts, jquery, html2canvas*** ** *여기서는 일부 m 코드를 생략하겠습니다.

문제:

개발환경에서 webpack을 사용해보니 5m 크기의 js 파일이 하나 발견되었습니다.

　vue-cli의 webpack 구성 덕분에 제작 환경이 2m로 줄어들었습니다.

해결책:

다양한 솔루션 검색: require.ensure, require dependency, multiple items, commonsChunkPlugin****여기에 노력을 절약할 수 있는 몇 가지 솔루션이 있습니다

아래 솔루션과 유사한 솔루션이 너무 많지만 없음 그 중 예상된 결과를 얻을 수 있습니다

entry:{ 
 main:'xxx.js',
  chunks:['c1', 'c2'],
  commons:['jquery', 'highcharts', 'echarts','d3', 'xxxxx.js']  
}
 
plugins:{
new commonsChunkPlugin({
name:'commons',
minChunks:2
})  
}

최적의 솔루션:

entry:{ 
 main:'xxx.js'
}
 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下边return参考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 以下才是关键
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) // 如果愿意，可以再new 一个commonsChunkPlugin
 
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

vue의 내장 구성요소 선택을 사용하는 단계에 대한 자세한 설명

React 사용 시 재렌더링 방지

위 내용은 webpack으로 패키징된 대용량 파일을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!