uni-app 컴파일 해결 후vendor.js 파일이 너무 큽니다.

배경과 현상

현재 간단한 기능만 있는 H5 프로젝트(vue-cli 3+를 통해 생성)를uni-app 프로젝트로 이전하려면 QQ 애플릿, H5로 출력하는 것을 지원해야 한다.QQ 애플릿 개발자 도구에서 미리보기와 실제 디버깅을 생성할 수 없는 것을 발견했다. 그 이유는 코드 패키지가 2M을 초과했기 때문이다. 분석을 통해 컴파일된 코드 중 가장 큰 것은 common/vendor.js이고 일부 처리 후에도 2.5M이 있다는 것을 발견했다.포장 생산 버전 분석도 마찬가지다.

프로젝트는 vue-cli 명령행을 통해 만들어졌기 때문에 아래의 예시와 관련된 것은 모두 이를 기준으로 HBuilderX에서 개발한 것이기 때문에 스스로 조작을 전환하는 것이 번거롭다.

해결 방법

실행 시 압축

이 방법은 테스트를 했지만 무슨 도움이 될지 모르겠다.

하도급 최적화

이 방법은 페이지가 너무 많거나static 이미지 자원이 너무 많은 경우에 더 유용하다.이 프로젝트도 하도급을 진행했지만 하도급 후 벤더의 과도한 문제는 해결되지 않았다.
상기 두 가지 방법은 유니가 공식적으로 건의한 벤더를 너무 크게 처리하는 방법문서-소개-uni-app 크로스 개발 주의사항-vendor 과도한 처리 방식 참조.

Bug: 하도급 자원이 메인 하도급에 하도급되어vendor가 너무 크다

이 문제는 발생하지 않았습니다. 이전 버전이 출현한 것처럼 보이지만 새 버전은 복원되었습니다. 만약에 이 문제로 인해 발생한 경우 참고할 수 있습니다. issue #649,question #72577

기타 처리 방식

본 문장은 내 프로젝트에서 이런 이유가 아니지만 이런 방법들은 고려해야 한다. 작은 패키지 크기 최적화 (uni-app)

생산환경 gzip,vendor 오픈.js 2.5M에서 440k

로 감소
어떻게 켜고compression-webpack-plugin을 사용합니까
vue.config.js:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

configureWebpack: {
    plugins: [
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//     
            threshold: 10240,// 10K         
            minRatio: 0.8,
            deleteOriginalAssets:false,//       
          })
        ]}
}

파일 분석

webpackBundleAnalyzer를 사용하여 파일 크기를 분석할 수 있습니다.
vue.config.js:

pluginOptions: {
    webpackBundleAnalyzer: {
      openAnalyzer: process.env.NODE_ENV === 'production'
    }
  },

컴파일 후, 세 가지 상태의 파일 크기를 볼 수 있는 보고서를 동시에 가지고 있습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

uni-app 시스템 정보 얻기

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

uni-app 컴파일 해결 후vendor.js 파일이 너무 큽니다.

배경과 현상

해결 방법

파일 분석

좋은 웹페이지 즐겨찾기