vue-cli 코드 속도를 높이고 최적화하는 방법

이번에는 vue-cli 코드의 속도를 높이고 최적화하는 방법을 보여 드리겠습니다. vue-cli 코드의 속도를 높이고 최적화하기 위한 주의 사항은 무엇입니까?

머리말

Vue의 세계화로 인해 다양한 Vue 구성요소 프레임워크가 점점 더 완벽해졌습니다. 초기 요소 UI부터 vux, iview 및 기타 고품질 프로젝트에 이르기까지 Vue를 프런트엔드 구축에 사용하는 것은 이미 엔지니어링 작업입니다. ,모듈화. , 민첩한 것들

그중에서도 많은 사람들이 공식 vue-cli 초기화 프로젝트 템플릿을 선택한 다음, 타사 컴포넌트 프레임워크와 도구를 도입하여 개발하고 빌드할 것이라고 믿습니다. 개인적으로 이 접근 방식을 적극 권장합니다. 그러나 vue-cli로 초기화된 프로젝트 템플릿은 결국 모든 개발자를 위한 것이므로 호환성 측면에서 어느 정도 타협이 있을 것입니다. 많은 분들이 다양한 웹팩 구축 최적화 글을 찾아보셨을 거라 생각합니다만, 그 중 상당수는 너무 오래되었거나 엄격하지 않은 내용입니다

이 기사는 시간이 많이 걸리는 최적화와 빌드 성능 개선 사이의 균형을 유지하기를 희망합니다. 즉, 공식 템플릿에 최소한의 시간을 투자하고 최소한의 수정만으로 최대의 빌드 성능 개선을 얻을 수 있기를 바랍니다

생각

vue-cli 및 webpack2 초기 버전에서는 다음과 같은 최적화된 구성이 인터넷에 유포되었지만 실제로는 vue-cli 및 webpack3 새 버전은 더 이상 필요하지 않습니다

1. ParallelUglifyPlugin을 사용하여 UglifyPlugin을 대체합니다(UglifyPlugin의 새 버전은 이미 기본적으로 다중 스레드 병렬 구성을 지원하고 활성화하므로 이 단계는 필요하지 않습니다).

2. webpack3의 범위 호이스팅 활성화(vue-cli의 새 버전은 다음으로 구성되었습니다. webapck3이며 이 구성은 기본적으로 활성화되어 있습니다) )

3. 별칭을 잘 활용하세요(vue-cli의 새 버전에서는 이미 이 작업을 수행했습니다)

4. 공개 코드를 추출하도록 CommonsChunkPlugin을 구성하세요(vue의 새 버전 -cli가 이미 이 작업을 수행했습니다)

vue-cli 및 webpack3의 새 버전의 경우 다음과 같은 간단한 구성으로 최적화 후 빌드 속도를 최소 2배 이상 높일 수 있습니다

1. 요청 시 참조

2. happypack 멀티 코어 빌드 프로젝트 활성화

3. 소스 맵 구성 수정

4. DllPlugin 및 DllReferencePlugin 사전 컴파일된 라이브러리 파일 활성화

연습

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+JS

VueRouter의 네비게이션 가드를 사용하는 방법

vue+element을 세부적으로 테이블 페이지 매김을 구현하는 방법

위 내용은 vue-cli 코드 속도를 높이고 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!