하나, 유지 가능한 웹팩 빌드 구성 작성
Chestnut : 구성 패키지 디자인 구축
빌드 구성을 npm 패키지로 분리하는 것의 중요성
Passability : 비즈니스 개발자는 구성 빌드에주의를 기울일 필요가 없습니다. 통합 팀 빌드 스크립트
유지 보수성 : 빌드 구성의 합리적인 분할, reademe, 변경 로그 문서
품질 : 연기 테스트, 단위 테스트, 테스트 범위, 연속 상속
구성 관리를위한 빌드 옵션
1) 서로 다른 환경의 구성을 관리하기 위해 여러 구성 파일을 통해 webpack --config 매개 변수는 다음과 같이 사용되는 구성 파일을 제어합니다.
기본 구성 : webpack.base.js; 개발 환경 : webpack.dev.js; 프로덕션 환경 : webpack.prod.js; ssr 환경 : webpack.ssr.js
2) 빌드 구성을 hjs-webpack Neutrino webpack-blocks와 같은 라이브러리로 설계합니다.
사양 : git commit log, README, ESLINT 사양, Semver 사양
품질 : 연기 테스트, 단위 테스트, 테스트 범위 및 CI
3) 다음과 같은 관리 도구를 그립니다. create-react-app kyt nwb
4) 파일에 모든 구성을 작성하고 --env 매개 변수를 통해 분기 선택을 제어합니다.
1) 2) 소규모 팀에 적합하며 대규모 팀은 선택할 수 있습니다. 3) 방법
webpack-merge 조합을 통한 구성
const merge = require("webpack-merge)
merge(
{a:[1], b:5, c:20},
{a:[2], b:6, d:35}
)
>{a:[1,2],b:6,c:20,d:35} // 非对象或非数组，则有相同的变量名，后面的覆盖前面的
合并配置：module.exports=merge(baseConfig,devConfig)
둘째, 웹팩 구축 속도 및 부피 최적화 전략
볼륨 최적화 방법 :
1) 범위 게양
2） 나무 흔들기
3) 공공 자원 분리
4) 이미지 압축
5) 동적 폴리 필
건설 속도를 개선하는 방법 :
1) 캐시를 최대한 활용하여 2 차 빌드 속도 향상
2) 추가 하청 : 사전 컴파일 된 리소스 모듈
Chestnut : 건설 속도 및 속도 분석
1) 웹팩의 내장 통계 사용 : 내장 통계
2) 속도 분석 : speed-measure-webpack-plugin을 사용하여 전체 패키지의 시간 소비, 각 플러그인 및 로더의 시간 소비를 분석합니다.
플러그인 설치
npm install -D speed-measure-webpack-plugin개체 만들기
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();이전 module.exports의 내용을 smp.wrap ()에 래핑합니다.
smp.wrap(...)
3) 부피 분석 : webpack-bundle-analyzer 사용
종속 된 타사 모듈의 파일 크기와 비즈니스 구성 요소의 코드 크기를 분석 할 수 있습니다.
설치 종속성
npm install -D webpack-bundle-analyzer구성
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
Chestnut : 상위 버전의 웹팩 및 노드 사용
Chestnut : 캐시를 최대한 활용하여 두 번째 빌드의 속도를 높입니다. 첫 번째 빌드의 속도는 변경되지 않고 다음 빌드의 속도는 변경됩니다.
캐싱 아이디어 :
1) Babel-loader는 캐싱을 사용하여 js 문법 또는 jsx 문법을 파싱합니다. 다음 번에 동일한 문법을 파싱 할 때 캐시 된 콘텐츠를 읽어 파싱 속도를 높일 수 있습니다.
2) terser-webpack-plugin은 코드 압축시 캐싱을 사용하여 압축 속도를 향상시킵니다.
3) 모듈 변환 단계의 속도를 향상시키기위한 캐시 로더 또는 하드 소스 웹팩 플러그인
코드 수준에서 캐싱이 켜져 있으면 node_modules 아래에 .cache 디렉토리가 있습니다. 예를 들어 babel-loader가 켜져 있으면 babel-loader 폴더 (node_modules / .cache / babel-loader / ....) 생성됩니다. 여기에는 구문 분석 된 js 파일이 포함됩니다.
참고 : 캐시가 켜져 있으면 패키지 업데이트에 영향을 미칠 수 있습니다. 예를 들어 패키지 [email protected]이 프로젝트에 설치되어 나중에 [email protected]로 업데이트되지만이 패키지의 코드는 다음과 같습니다. 여전히 이전 버전입니다.
해결 방법 : 패키지를 업데이트하기 전에 .cache 폴더 전체를 제거하십시오.
hard-source-webpack-plugin을 밤나무로 사용하십시오.
1) hard-source-webpack-plugin 설치
npm install -D hard-source-webpack-plugin2) 구성 파일에서 플러그인을 가져 와서 구성하십시오.
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
plugin: [
new HardSourceWebpackPlugin()
]밤나무 : 빌드 대상 축소
목적 : 가능한 한 적은 빌딩 블록,
예 : babel-loader는 node_modules를 확인하지 않습니다.
module.exports = {
module: {
rules: [
{
test: /\.js$/,
loader: ''babel-loader,
exclude: 'node_modules
}
]
}
}예 : 파일 검색 범위를 줄입니다.
Webpack은 노드가 파일을 찾는 방식과 매우 유사하므로 찾을 경로 또는 파일 유형을 지정하여 검색 시간을 줄이십시오.
resolve.modules 구성 최적화 (모듈 검색 수준 감소)
resolve.mainFields 구성 최적화
resolve.extensions 구성 최적화
합리적인 별칭 사용
resolve: {
alias: {
react: path.resolve(__dirname, ./node_modules/react/dist/react.min.js') // 直接给定取别名的路径
},
modules: [path.resolve(__dirname, 'node_modules')], // 安装第三方包是在node_modules目录下，那么在引进第三方包的时候直接到node_module目录下查找
extensions: ['.js'], // 指定查找文件的类型
mainFields: ['main'] // 发布到npm上的包会指定入口路径，即main字段的值，即查找文件只在该路径下查找
}
밤나무 : 나무 흔들기 (나무 흔들기 최적화)
개념 : 모듈은 여러 메소드를 가질 수 있습니다. 메소드 중 하나를 사용하는 한 전체 파일은 번들로 패키징되고 트리 쉐이킹은 사용 된 메소드를 번들로 압축하고 사용하지 않는 메소드는 번들에 포함됩니다. . uglify 단계 지우기
사용 : 웹팩은 기본적으로 지원합니다. 모듈을 .babelrc에서 false로 설정하면됩니다. 참고 : 모드에서는 기본적으로 활성화됩니다 : 생산
요구 사항 : ES6 구문이어야하며 cjs 메서드는 지원하지 않습니다.
쓸모없는 CSS를 삭제하는 방법?
PurifyCSS : 코드를 탐색하고 사용 된 CSS 클래스를 식별합니다.
uncss : HTML은 jsdom을 통해로드되어야하며 모든 스타일은 PostCSS를 통해 구문 분석되며 document.querySelector는 html 파일에없는 선택자를 식별하는 데 사용됩니다.
웹팩에서 PurifyCSS를 사용하는 방법
purgecss-webpack-plugin 및 min-css-extract-plugin을 함께 사용하십시오.
1) purgecss-webpack-plugin 플러그인 설치
npm i purgecss-webpack-plugin -D2) 프로젝트에 플러그인 소개
다음은 단일 파일 항목, 참조 주소입니다. https://www.npmjs.com/package/purgecss-webpack-plugin
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const PATHS = {
src: path.join(__dirname, 'src')
}
plugins: [
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
})
]밤 : 이미지 압축
요구 사항 : Node 라이브러리 기반의 imagemin 또는 tinypng API
사용 : 이미지 웹팩 로더 구성
참조 문서 사용 : https://www.npmjs.com/package/image-webpack-loader
1) 플러그인 설치
npm install image-webpack-loader -D2) 구성 파일에서 설정
module.exports.module.rules = [{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img_[name][hash:8].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}]Chestnut : 빌드 볼륨 최적화, 동적 폴리 필
polyfill-service 사용 : 사용자가 필요로하는 polyfill 만 반환하고 식별하고 다른 polyfill을 발급합니다.
셋, 소스 코드를 통해 webpack 패키징의 원리를 마스터
Chestnut : 웹팩 시작 프로세스 분석
프로젝트가 시작되었을 때 무슨 일이 있었습니까?
일반적으로 프로젝트를 시작하려면 콘솔을 누르고 npm run dev 및 기타 명령문을 입력하면 프로젝트가 시작되거나 콘솔에 webpack entry.js 및 bundle.js를 입력하여 직접 실행합니다 .---- -이 과정에서 어떤 일이 발생합니까? ? ?
위 명령문이 실행되면 npm은 명령 줄 도구가 node_modules / .bin 디렉토리에 들어가서 webpack.sh webpack.cmd 파일이 있는지 확인하고 파일이 있으면 실행합니다. 그렇지 않으면 오류가 발생합니다. 실제 항목 파일 경로 : node_modules / webpack / bin / webpack.js ( 명령은 여기에 정의되어 있지만 webpack 패키지 또는 webpack-cli 패키지에서 제공하는 명령입니까? )
전역 적으로 설치된 패키지는 userLocal / .bin에서 검색되지만 일반적으로 웹팩을 로컬로 설치합니다. 즉, 특정 프로젝트에 설치되므로 프로젝트의 루트 디렉토리에있는 node_modules / .bin에서 파일을 찾습니다.
패키지를 로컬로 설치할 때 .bin 디렉토리에이 명령을 포함하려면 package.json의 bin 필드에 지정해야합니다.
node_modules / .bin / webpack 파일에 정의 된 내용을 확인하십시오.
process.exitCode = 0 // 正常执行返回
const runCommand = (command, args) => {} // 运行某个命令
const isInstalled = packageName => {} // 判断某个包是否安装了
const CLIs = [....] // webpack可以用的cli：webpack-cli webpack-command
const isntalledClis = CLIs.filter(cli => cli.installed) // 判断安装了那些cli
if (isntalledClis.length === 0) {// 根据安装数量进行处理
} else if (isntalledClis.length === 1) {
} else {
}시작 후 결과 :
webpack은 마지막으로 npm 패키지 webpack-cli (webpack-command)를 찾고 cli를 실행합니다.
Chestnut : webpack-cli 소스 코드 읽기