함수에서 require를 사용하면 번들 크기가 200 % 증가합니다.

Question

내 Vue + Webpack 프로젝트 이전 빌드에서 dist 폴더 js 파일 크기는 4MB였습니다.

새로운 기능을 추가하고 빌드를 다시 실행하면 이제 번들 크기가 12Mb로 증가했습니다.

이 기능은 내가 번들이 4메가바이트 다시 것이 라인,

search() { 
    /// some codes 
    chapterselected = require('assets/json/ml/' + chapterfile + '.xml.json') 
    /// process chapterselected here 
}, 

를 언급하면 ​​내가의 주요 부분으로이 줄을 제거 할 수 없습니다,이 라인

거기에

chapterselected = require('assets/json/ml/' + chapterfile + '.xml.json')

있다 함수 그래서이 문제를 해결하는 데 도움이 필요해 - 왜 그것이 번들 크기를 증가 무엇입니까?

Answer 1

해당 폴더에있는 모든 파일을 번들에 넣고 있습니다 (assets/json/ml/). 아마도 그 파일은 대용량 파일입니다.

Javascript 파일이 너무 크면 *.json 파일을 json loader가 아닌 파일 로더에 전달하여 런타임시 네트워크를 통해로드합니다. 커다란 json 파일은 출력 폴더에 저장되지만 런타임에 필요한 파일 만로드합니다.