Webpack 경험 공유

webpack은 모듈 번들러입니다. 주요 목표는 JavaScript 파일을 함께 패키지하는 것입니다. 패키지된 파일은 브라우저에서 사용되지만 변환, 번들 또는 패키지에도 사용할 수 있습니다. 이 기사는 주로 Webpack을 여러분과 공유하므로 모든 사람에게 도움이 되기를 바랍니다. .

Caching

캐싱을 위해 max-age + cdn과 결합된 [name].[contenthash:8].js 파일 이름을 생성합니다. [name].[contenthash:8].js，结合 max-age + cdn 做缓存。

网页加载

html

以前是固定的一个 html， html -》版本号 js 文件（通过webpack打出来的）-》通过版本号确定具体 js。（现在想想不太合理，虽然没和后台耦合这么重）

现在是变动的 html，通过 HtmlWebpackPlugin 打出来（webpack 生成，里面包含版本号的 js）

这样还省了一个串行时间（拉版本号文件）。 同时也便于做灰度，比如发布了需求，让一部分用户先体验，动态打出 html 给到后台即可。（固定 html 则没这么轻松做）

css分离

在观麦，css变动会非常的少，这得益于 react-gm 对类名的完善。 既然变动少，把 css 单独出来也不错，使用 ExtractTextPlugin 分离 css。

分离后减少 js 大小，不阻塞 js，同时 css 和 js 可同时拉取。

common

new CommonsChunkPlugin({name: 'commons'})

看打包后的 common 代码，会发现其他模块的id和hash都会打在common中，这样每次 commons 文件都会变，就很难做缓存了。

提供两个文件列表即可，会发现 webpack 吧 id 和 hash 打在 manifest 文件中。这样commons就可以缓存了。btw，没看到官网有介绍，看到的说声。

new CommonsChunkPlugin({names: ['commons', 'manifest']})

本地开发

讲讲代理，本地开始是自己起的服务，没有后台服务，自然需要代理到某个地方。 可通过 devServer.proxy 。也可代理到外网排查 bug，都是源码，查 bug 非常快。

"proxy": {
    "/ticket/*": {
      "target": "http://dev.guanmai.cn:7413",
      "changeOrigin": true
    }
}

打包速度

DllPlugin

当项目大了后，必然需要打很多包，导致打包时间非常长。 官方推荐做法是把不常变动的文件打DLL。

我们工程就把  react react-dom prop-types classnames mobx mobx-react lodash moment big.js 等打进来。

网上资料都介绍 dll 的 文件名是 [name]_[hash].dll.js, 我们是 [npm version]_dll.js npm version

웹 페이지 로딩

html

예전에는 고정된 html, html -> 버전 번호 js 파일(webpack을 통해 입력) -> 버전 번호를 통해 특정 js를 판별합니다. (백엔드와 크게 결합되지는 않았지만 지금 생각해보면 말이 안 됩니다.)

이제는 HtmlWebpackPlugin을 통해 입력되는 변경된 html입니다(webpack에 의해 생성되고 버전 번호가 있는 js가 포함됨). )

이렇게 하면 일련 시간도 절약됩니다(버전 번호 파일 가져오기). 동시에 그레이 스케일을 수행하는 것도 편리합니다. 예를 들어 요구 사항을 게시하는 경우 일부 사용자가 먼저 경험하게 한 다음 html을 동적으로 입력하여 백그라운드로 보냅니다. (html 수정이 쉽지 않네요)

css 분리

Guanmai에서는 React-gm의 클래스 이름 개선 덕분에 CSS 변경이 거의 없을 것입니다. 변경사항이 거의 없기 때문에 CSS를 분리하고 ExtractTextPlugin을 사용하여 CSS를 분리하는 것도 나쁘지 않습니다.

분리 후에는 js의 크기가 줄어들고 js가 차단되지 않는 동시에 CSS와 js를 동시에 가져올 수 있습니다.

common

rrreee

패키징된 Common 코드를 보면 다른 모듈의 ID와 해시가 공통으로 입력되어 Commons 파일이 매번 변경되어 캐시하기 어려운 것을 알 수 있습니다.

두 개의 파일 목록만 제공하면 webpack이 매니페스트 파일에 ID와 해시를 저장하는 것을 확인할 수 있습니다. 이런 식으로 커먼즈를 캐시할 수 있습니다. 그런데, 공식 홈페이지에는 소개가 하나도 없었는데, 알고 계시면 알려주세요.

rrreee

로컬 개발

에이전트에 대해 이야기해 보겠습니다. 로컬 서비스는 백그라운드 서비스가 없으므로 당연히 어딘가에 에이전트가 있어야 합니다. devServer.proxy를 통해 사용 가능합니다. 또한 에이전트를 이용하여 외부 네트워크에 접속하여 버그를 확인할 수도 있습니다. 모두 소스 코드이므로 버그 확인이 매우 빠릅니다.

rrreee

패키징 속도

DllPlugin

프로젝트가 커지면 필연적으로 많은 패키지가 필요하게 되어 패키징 시간이 매우 길어집니다. 공식적으로 권장되는 접근 방식은 자주 변경되지 않는 파일을 DLL로 만드는 것입니다.

우리 프로젝트는 react react-dom prop-types classnames mobx mobx-react lodash moment big.js 들어올 때까지 기다리세요.

온라인 정보에는 모두 dll의 파일명이 [이름]_[hash].dll.js라고 소개되어 있습니다. 우리는 package.json 버전에서 [npm 버전]_dll.js npm 버전을 읽습니다.

해시를 사용하지 않고 npm 버전을 사용하는 것이 어떨까요? 2차 패키징을 고려할 때 문제가 발생했습니다. DLL을 다시 패키징해야 하는지 판단하는 방법은 무엇입니까? 해시인 경우 어떻게 해야 합니까(해결책을 추천해 주십시오). npm 버전을 사용한다면 버전이 바뀌자마자 리패키징을 하게 됩니다. 예를 들어, React가 업그레이드되면 버전+를 갖고 리패키징을 하게 됩니다.

happypack

happypack은 빌드 속도를 크게 향상시키며, 여러 스레드로 패키징할 수 있으며 캐시도 재구축 속도를 높여줍니다.

devtool

개발용 평가, 프로덕션용 소스 맵(디스플레이 문제 해결, 패키징 속도 희생, 허용 범위 내에서 사용)

babel-loader

cacheDirectory 기억

noParse && alias

일부 라이브러리 필요하지 않은 경우 noParse 구성은 구문 분석되지 않으며 별칭은 x.min.js 파일을 가리킵니다.

나무 흔들기

는 아직 사용하지 않아서 아직은 때가 아닌 것 같은 느낌입니다. 좋은 글이 있어요. @2.x. 이제 webpack이 별도로 나왔고, 캐시 지원, 멀티 코어 압축 등 더 많은 기능을 가지고 있는데, 꽤 빨랐습니다. webpack.optimize.UglifyJsPlugin은 실제로 uglifyjs-webpack-plugin입니다.

이상한 점은 공식적으로 uglify-es를 기반으로 한다는 것입니다. 하지만 종속성은 여전히 ​​uglify-js라고 생각합니다. 기묘. UglifyJsParallelPlugin

🎜 정식 출시 전에는 멀티코어를 지원하는 webpack-uglify-parallel을 사용했습니다. 속도는 uglifyjs-webpack-plugin과 크게 다르지 않습니다. 🎜🎜글을 작성하면서 github을 뒤져보니 7월에 폐기되어 공식 홈페이지에 통합된 것을 발견했습니다. 🎜🎜Others🎜🎜babel의 babel-minify-webpack-plugin은 옆에 있어주세요. 🎜🎜Script cdn🎜🎜일부 js(gm-fetch babel-polyfill)에는 변경 사항이 거의 없습니다. webpack으로 패키징하는 것은 약간 낭비적입니다. cdn을 통해 얻어서 html 문서에 스크립트 형식으로 넣을 수 있습니다. 🎜🎜분석🎜🎜차트도 있고 매우 직관적인 분석도 있습니다. 나는 그것을 선호한다. 🎜webpack-monitor🎜🎜이전 버전은 webpack-bundle-analyzer🎜🎜관련 권장 사항: 🎜🎜🎜webpack을 사용하여 프런트 엔드 프로젝트를 구축하기 위한 웹 예제 코드🎜🎜🎜🎜 webpack 구성 방법 요약🎜🎜

node.js의 npm 및 webpack 구성 방법에 대한 자세한 설명

위 내용은 Webpack 경험 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!