패키지 파일 크기가 너무 큰 경우 어떻게 처리하나요?

이번에는 크기가 너무 큰 패키지 파일을 처리하는 방법을 알려 드리겠습니다. 크기가 너무 큰 패키지 파일을 처리할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 함께.

최적화 비교:

최적화 전: 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 구성 요소는 무한 다중 선택 메뉴를 만듭니다

Mac에 nodejs, npm 및 cnpm 설치

위 내용은 패키지 파일 크기가 너무 큰 경우 어떻게 처리하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!