이번에는 vue-cli 코드의 속도를 높이고 최적화하는 방법을 보여 드리겠습니다. vue-cli 코드의 속도를 높이고 최적화하기 위한 주의 사항은 무엇입니까?
머리말
Vue의 세계화로 인해 다양한 Vue 구성요소 프레임워크가 점점 더 완벽해졌습니다. 초기 요소 UI부터 vux, iview 및 기타 고품질 프로젝트에 이르기까지 Vue를 프런트엔드 구축에 사용하는 것은 이미 엔지니어링 작업입니다. ,모듈화. , 민첩한 것들
그중에서도 많은 사람들이 공식 vue-cli 초기화 프로젝트 템플릿을 선택한 다음, 타사 컴포넌트 프레임워크와 도구를 도입하여 개발하고 빌드할 것이라고 믿습니다. 개인적으로 이 접근 방식을 적극 권장합니다. 그러나 vue-cli로 초기화된 프로젝트 템플릿은 결국 모든 개발자를 위한 것이므로 호환성 측면에서 어느 정도 타협이 있을 것입니다. 많은 분들이 다양한 웹팩 구축 최적화 글을 찾아보셨을 거라 생각합니다만, 그 중 상당수는 너무 오래되었거나 엄격하지 않은 내용입니다
이 기사는 시간이 많이 걸리는 최적화와 빌드 성능 개선 사이의 균형을 유지하기를 희망합니다. 즉, 공식 템플릿에 최소한의 시간을 투자하고 최소한의 수정만으로 최대의 빌드 성능 개선을 얻을 수 있기를 바랍니다
생각
vue-cli 및 webpack2 초기 버전에서는 다음과 같은 최적화된 구성이 인터넷에 유포되었지만 실제로는 vue-cli 및 webpack3 새 버전은 더 이상 필요하지 않습니다
ParallelUglifyPlugin을 사용하여 UglifyPlugin을 대체합니다(UglifyPlugin의 새 버전은 이미 기본적으로 다중 스레드 병렬 구성을 지원하고 활성화하므로 이 단계는 필요하지 않습니다).
vue-cli 및 webpack3의 새 버전의 경우 다음과 같은 간단한 구성으로 최적화 후 빌드 속도를 최소 2배 이상 높일 수 있습니다
요청 시 참조
연습
1. 주문형 견적
1.1 거의 모든 타사 구성 요소 프레임워크는 구성 요소에 대한 주문형 참조를 제공합니다. 예를 들어, 플러그인 babel-plugin-import를 사용하면 필요에 따라 구성 요소를 로드하고 파일 크기를 줄일 수 있습니다. .babelrc 파일을 수정하려면
npm install babel-plugin-import --save-dev // .babelrc { "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]] }
1.2 그런 다음 필요에 따라 구성 요소를 도입하여 크기를 줄입니다
import { Button } from 'iview' Vue.component('Table', Table)
2. happypack 멀티 코어 빌드 프로젝트 활성화
happypack 설치 후 /build/webpack.base.conf.js 파일을 수정하세요
npm install happypack --save-dev // /build/webpack.base.conf.js const HappyPack = require('happypack') const os = require('os') const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }) // 增加HappyPack插件 plugins: [ new HappyPack({ id: 'happy-babel-js', loaders: ['babel-loader?cacheDirectory=true'], threadPool: happyThreadPool, }) ] // 修改引入loader { test: /\.js$/, // loader: 'babel-loader', loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader include: [resolve('src'), resolve('test')] }
3. 소스 맵 구성 수정
3.1 먼저 /config/index.js 파일을 수정하세요
// /config/index.js dev环境:devtool: 'eval'(最快速度) prod环境:productionSourceMap: false(关闭source-map)
3.2 그런 다음 /src/main.js 파일을 수정하고 프로덕션 환경의 디버깅 정보를 끄세요
// /src/main.js const isDebug_mode = process.env.NODE_ENV !== 'production' Vue.config.debug = isDebug_mode Vue.config.devtools = isDebug_mode Vue.config.productionTip = isDebug_mode
4. DllPlugin 및 DllReferencePlugin 사전 컴파일된 라이브러리 파일 활성화
이는 효과를 향상시키기 위한 가장 복잡한 단계이자 가장 확실한 단계입니다. 타사 라이브러리 파일을 별도로 한 번 컴파일하고 패키징하는 것이 원칙입니다. 후속 빌드에서는 타사 라이브러리를 컴파일하고 패키징할 필요가 없습니다. 4.1 build/webpack.dll.config.js 파일을 추가하고 별도로 DLL이 필요한 모듈을 구성합니다
const path = require("path") const webpack = require("webpack") module.exports = { // 你想要打包的模块的数组 entry: { vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview'] }, output: { path: path.join(dirname, '../static/js'), // 打包后文件输出的位置 filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.join(dirname, '.', '[name]-manifest.json'), name: '[name]_library', context: dirname }), // 压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }
4.2 build/webpack.dev.conf.js 및 build/webpack.prod.conf.js에 다음 플러그인을 추가합니다.
new webpack.DllReferencePlugin({ context: dirname, manifest: require('./vendor-manifest.json') })
4.3 /package.json에
"dll": "webpack --config ./build/webpack.dll.config.js"
명령 추가 4.4 /index.html에 DLL 기반 JS 소개 추가(먼저 소개해야 함)
<script src="/static/js/vendor.dll.js"></script>
4.5 빌드 실행
npm run dll(这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js) npm run dev 或 npm run build
후기
위의 네 가지 주요 단계가 완료된 후 vue-cli 템플릿 프로젝트 구성의 최적화 및 개선이 완료되었습니다. 아직 간단하지 않은 것 같지만 이미 가장 간단한 최적화이며 공교롭게도 더 많은 트릭이 있습니다. 너무 많은 최적화 구성은 별 의미가 없다고 생각하기 때문에 확장하지 않았지만 프로젝트에 너무 많은 중복성과 복잡성을 가져올 것입니다
위 구성의 실제 테스트 빌드 효과는 원래 13초에서 약 6초로 줄었고, 핫 배포는 심지어 밀리초 수준까지 가능했습니다
가장 중요한 것은 향후 vue-cli 및 webpack을 새 버전으로 업그레이드한 후 가장 간단한 구성을 쉽게 재구성하여 사용할 수 있다는 점입니다. 숙련된 구성 후에는 구성을 복원하는 데 약 5분밖에 걸리지 않습니다. 5분 안에 구성을 수정하면 각 빌드 속도가 2배 이상 향상될 수 있습니다. 조금 기대되지 않나요? 여기서 몇 마디만 더 말씀드리자면, 사실 webpack2에서 webpack3으로의 업그레이드는 여전히 모든 웹 프로젝트를 점유한다는 목표로 만들어진 제품으로서 지나치게 복잡한 구성 문제를 근본적으로 해결하지 못하기 때문에 상당히 실망스럽습니다. 세상에서는 사용의 용이성/인간성 측면에서 좀 더 고려해봐야 할 것 같습니다
webpack 프로젝트의 다양한 .babelrc, .postcssrc.js... 및 다양한 .conf 파일을 볼 때마다 심지어 메인파일, 인덱스파일, 앱파일까지 종류가 다 있는데 왜 프론트엔드 구성이 이렇게 발전했는지 불만을 금할 수 없다. 좋은 프로젝트에는
구성 파일이 열두 개가 넘는다. . 정말 필요한가요? 원래는 webpack3이 이 모든 것을 간단하게 만들어줄 거라고 생각했는데, 그렇지 않네요. 하지만 당분간은 바꿀 수 있는 방법이 없기 때문에, 우리가 할 수 있는 일은 최대한 원리를 이해하고 단순화하도록 최선을 다하는 것입니다. 최적화하다 나는 당신이 이 기사를 읽는 방법을 마스터했다고 믿습니다. 더 흥미진진한 내용을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요! 추천 자료:
회전하는 디지털 시계를 구현하는 HTML+JSvue+element을 세부적으로 테이블 페이지 매김을 구현하는 방법
위 내용은 vue-cli 코드 속도를 높이고 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!