vue-cli의 webpack3 속도 최적화 관련 문제

이 글은 주로 vue-cli의 webpack3 구성과 종합적인 속도 향상 최적화에 대한 자세한 설명을 소개하고 있습니다.

머리말

vue의 세계화와 함께 다양한 vue 컴포넌트 프레임워크가 점점 더 완벽해졌습니다. 초기 element-ui부터 vux, iview 및 기타 점점 더 고품질 프로젝트에 이르기까지 vue는 이미 프런트엔드에 사용되고 있습니다. 건설은 엔지니어링, 모듈식, 민첩한 것입니다

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

이 글은 시간이 많이 걸리는 최적화와 빌드 성능 개선 사이의 균형, 즉 최소한의 시간을 투자하기를 희망합니다. on 공식 템플릿을 최소한으로 수정하여 최대 빌드 성능 향상을 얻습니다

아이디어

vue-cli 및 webpack2의 초기 버전에서는 다음과 같은 최적화된 구성이 인터넷에 유포되었지만 실제로는 새 버전의 vue-cli- 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 거의 모든 타사 구성 요소 프레임워크는 구성 요소에 대한 주문형 참조를 제공합니다. iview를 예로 들면 플러그인 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을 수정하세요.

// /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 DLL 기반 JS 추가에 다음 플러그인을 추가합니다. import to /index.html (먼저 소개해야 함)

<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

Postscript

위의 4가지 주요 단계가 완료된 후 vue-cli 템플릿 프로젝트의 최적화 및 개선이 완료되었습니다. 구성 아직 간단하지 않은 것 같지만 이것은 이미 가장 간단한 최적화이며 아직 수행되지 않은 트릭과 트릭이 더 많습니다. 왜냐하면 너무 많은 최적화 구성은 별 의미가 없지만 너무 많은 중복을 가져올 것이라고 생각하기 때문입니다. 그리고 프로젝트의 복잡성

위 구성의 실제 테스트 빌드 효과는 원래 13초에서 약 6초로 줄어들고, 핫 배포는 밀리초입니다.

가장 중요한 것은 가장 간단한 구성에서 vue-cli를 허용한다는 것입니다. 그리고 webpack은 추후 새로운 버전으로 업그레이드 될 예정이며, 이후에는 쉽게 재구성하여 사용할 수 있습니다. 한 번 구성한 후 구성을 복원하는 데 5분 정도만 투자하면 구성을 수정할 수 있습니다. 각 빌드의 속도를 2배 이상 높이세요. 좀 기대되지 않나요? :)

여기서 몇 마디 더 말씀드리자면, 사실 webpack2에서 webpack3으로의 업그레이드는 개인적으로 꽤 실망스럽습니다. 여전히 지나치게 복잡한 구성의 문제를 근본적으로 해결하지 못하고 있습니다. 전 세계 모든 웹 프로젝트를 지배하는 제품은 사용 편의성/인간성 측면에서 더 많이 고려되어야 합니다.

다양한 .babelrc를 볼 때마다 , .postcssrc.js... webpack 프로젝트에... 다양한 .conf 파일이 있고, 심지어 다양한 메인, 인덱스, 앱 파일까지 있는데 왜 프론트엔드 구성이 엉터리인지 불평을 하고 싶습니다. 좋은 프로젝트에는 수십개 이상의 구성 파일이 있는데, 꼭 필요한 걸까요? 원래는 webpack3이 이 모든 것을 간단하게 만들어줄 거라고 생각했는데, 그렇지 않네요. 하지만 당분간은 바꿀 수 있는 방법이 없기 때문에, 우리가 할 수 있는 일은 최대한 원리를 이해하고 단순화하도록 최선을 다하는 것입니다. 최적화

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

js 사용자 정의 트림 기능을 사용하여 양쪽 끝 공백 삭제

JavaScript 작동 원리

vue에서 모두 선택 및 역선택

jest를 사용하여 반응 네이티브 테스트에 대한 자세한 설명 구성요소

데이터 바인딩 및 획득을 위해 vue에서 모두 선택

mint-ui에서 시간 플러그인을 사용하여 선택 값을 얻습니다

VUE2는 보조 지방 및 도시 연결 선택을 구현합니다

위 내용은 vue-cli의 webpack3 속도 최적화 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!