이 글은 주로 vue-cli의 webpack3 구성과 종합적인 속도 향상 최적화에 대한 자세한 설명을 소개하고 있습니다.
머리말
vue의 세계화와 함께 다양한 vue 컴포넌트 프레임워크가 점점 더 완벽해졌습니다. 초기 element-ui부터 vux, iview 및 기타 점점 더 고품질 프로젝트에 이르기까지 vue는 이미 프런트엔드에 사용되고 있습니다. 건설은 엔지니어링, 모듈식, 민첩한 것입니다
이에서 많은 사람들이 공식 vue-cli 초기화 프로젝트 템플릿을 선택한 다음 타사 구성 요소 프레임워크와 도구를 도입하여 개발하고 구축할 것이라고 믿습니다. 이 접근 방식을 권장합니다. 그러나 vue-cli로 초기화된 프로젝트 템플릿은 결국 모든 개발자를 위한 것이므로 호환성 측면에서 어느 정도 타협이 있을 것입니다. 많은 분들이 다양한 웹팩 빌드 최적화 관련 글을 찾아보셨을 거라 생각하는데, 그 중 상당수가 너무 오래되었거나 엄격하지 않은 내용입니다
이 글은 시간이 많이 걸리는 최적화와 빌드 성능 개선 사이의 균형, 즉 최소한의 시간을 투자하기를 희망합니다. on 공식 템플릿을 최소한으로 수정하여 최대 빌드 성능 향상을 얻습니다
아이디어
vue-cli 및 webpack2의 초기 버전에서는 다음과 같은 최적화된 구성이 인터넷에 유포되었지만 실제로는 새 버전의 vue-cli- cli 및 webpack3은 더 이상 필요하지 않습니다.
ParallelUglifyPlugin을 사용하여 UglifyPlugin을 대체합니다(UglifyPlugin의 새 버전은 이미 기본적으로 다중 스레드 병렬 빌드를 지원하고 활성화하므로 이 단계는 필요하지 않습니다)
webpack3의 범위 끌어올리기 활성화 (vue-cli의 새 버전은 webapck3으로 구성되었으며 이 구성은 기본적으로 켜져 있습니다.)
별칭을 잘 활용하세요(vue-cli의 새 버전은 이미 이 작업을 수행했습니다)
공개 코드를 추출하도록 CommonsChunkPlugin을 구성하십시오(vue-cli의 새 버전은 이미 이 작업을 수행했습니다)
vue-cli 및 webpack3의 새 버전의 경우 다음과 같은 간단한 구성으로 빌드 속도를 최소 2배 이상 높일 수 있습니다. 최적화 후
필요 시 참조
happypack 멀티 코어 빌드 프로젝트 활성화
소스 맵 구성 수정
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 사용자 정의 트림 기능을 사용하여 양쪽 끝 공백 삭제
jest를 사용하여 반응 네이티브 테스트에 대한 자세한 설명 구성요소
mint-ui에서 시간 플러그인을 사용하여 선택 값을 얻습니다
위 내용은 vue-cli의 webpack3 속도 최적화 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!