vue cli 업그레이드 webpack4 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-05-02 11:46:49
원래의
2780명이 탐색했습니다.

이번에는 vue cli에서 webpack4를 업그레이드하는 단계에 대해 자세히 설명하겠습니다. vue cli에서 webpack4를 업그레이드할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

webpack4가 출시된지 꽤 됐는데, 플러그인 시스템이 안정화됐네요. webpack3의 패키징 속도가 만족스럽지 않아서, 현재 진행중인 프로젝트를 업그레이드 하기로 결정하고, 그냥 webpack4를 연습해보고 싶습니다. .

새로운 기능

0 구성

택배가 나온 후에야 webpack 팀은 구성이 실제로 약간 복잡하고 시작하기 쉽지 않다는 것을 깨달았습니다. 따라서 webapck4는 제로 구성 시작을 지원하기 시작합니다. 그러나 webpack4의 0 구성은 기본 항목과 출력만 지원합니다. 즉, 기본 항목은 ./src이고 기본 출력은 /dist입니다.

모드 선택mode

모드에는 제작과 개발이라는 두 가지 옵션이 있습니다. 필수 옵션으로 모드를 기본값으로 설정할 수 없습니다. 프로덕션 모드에서는 코드 압축, 범위 승격 등 일부 필요한 최적화가 기본적으로 이루어지며, process.env.NODE_ENV는 기본적으로 프로덕션으로 지정됩니다. 개발 모드에서는 증분 빌드가 최적화되고 주석 및 프롬프트가 지원되며 평가 중인 소스 맵이 지원되는 반면 process.env.NODE_ENV는 기본적으로 개발로 지정됩니다.

sideEffects

이 구성을 사용하면 포장 부피를 크게 줄일 수 있습니다. 모듈의 package.json이 sideEffects:false로 구성되면 모듈에 부작용이 없음을 나타냅니다. 이는 webpack이 다시 내보내기에 사용된 코드를 안전하게 정리할 수 있음을 의미합니다.

모듈 유형

webpack4는 5가지 모듈 유형을 제공합니다.

  1. json: require 및 가져오기를 통해 가져올 수 있는 JSON 형식 데이터(기본값은 .json 파일)

  2. webassembly: WebAssembly 모듈(현재 .wasm 파일의 기본 유형)

  3. javascript/auto: (webpack 3의 기본 유형) 모든 JS 모듈 시스템(CommonJS, AMD)을 지원합니다.

  4. javascript/esm: EcmaScript 모듈(기본 .mjs 파일).

  5. javascript/dynamic: CommonJS 및 AMD만 지원합니다.

JSON

webpack 4는 JSON의 기본 처리를 지원할 뿐만 아니라 JSON의 Tree Shaking도 지원합니다. ESM 구문을 사용하여 json을 가져올 때 webpack은 JSON 모듈에서 사용되지 않는 내보내기를 제거합니다. 또한 로더를 사용하여 json을 js로 변환하려면 ​​type을 javascript/auto로 설정해야 합니다.

optimization

Webpack 4는 CommonsChunkPlugin을 제거하고 기본적으로 많은 기능을 활성화했습니다. 따라서 webpack4는 좋은 기본 최적화를 달성할 수 있습니다. 그러나 사용자 정의 캐싱 전략이 필요한 경우 Optimization.splitChunks 및 Optimization.runtimeChunk가 추가되었습니다. 구체적인 설명은 이 글을 참고하시면 자세하게 설명되어 있습니다. RIP CommonsChunkPlugin 미리 보려면 클릭하세요
.

단계별 업그레이드

원본 vue cli 프로젝트를 업그레이드했습니다. 일반적으로 업그레이드는 두 단계로 나누어 진행됩니다. 먼저 관련 종속 플러그인을 업그레이드한 다음 webapck를 최적화합니다. 프로필.

플러그인 업그레이드

먼저 아래 나열된 플러그인을 해당 버전 또는 최신 버전으로 업그레이드하세요

webpack@4.4.1

css-loader@0.28.10,

extract-text -webpack-plugin@ 4.0.0-beta.0,file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url -loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware @3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

다른 패키지에서 오류가 발생하면 다음 패키지로 업그레이드하여 해결해야 합니다. 최신 것.

구성 파일 업데이트

webpack.dev.conf.js

dev环境变化不大,毕竟webpack4很大一部分的优化都是针对生产环境的,该文件我们只需要删除一些不再需要的插件既可以。例如:webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin,其功能webpack4已经默认配置。同时,要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大,影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分,webpack runtime之类的代码,结合chunkhash,实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能,并且配置更加灵活,具体解释可参考这篇文章,解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}
로그인 후 복사

总结

总体来说本次升级还算顺利,不到一天搞定,目前感觉,打包速度大约优化了70%左右,同时打包后的代码体积也有了很大的优化,带来的效果很显著的。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue todo-list组件上传npm

JS操作DOM删除节点

위 내용은 vue cli 업그레이드 webpack4 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿