vue cli를 webapck4로 업그레이드하는 방법

이번에는 vue cli로 webapck4를 업그레이드하는 방법을 알려드리겠습니다. vue cli로 webapck4를 업그레이드할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

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.js动态操作同级class

D3.js实现动态表盘效果

위 내용은 vue cli를 webapck4로 업그레이드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!