webpack 패키지 파일 크기가 너무 큰 문제를 해결하는 방법

최적화 비교:

최적화 전: 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

}

패키징 결과 위 코드: main.js, commons.js,charts.js