웹 팩 번들의 크기를 최소화하는 방법
가 지금 react ★★★★★★★★★★★★★★★★★」webpack모듈 번들러로 사용할 수 있습니다. ★★★jsx코드가 너무 가벼워서 전체 폴더 크기가 25kb입니다.
★★★bundle.js에서 되었습니다.webpack2.이지만 22 mb입니다.에서 한 후-p플래그를 사용하면 번들이 700kb로 줄어들어 여전히 매우 큰 크기입니다.
제가 조사했습니다.react.min.js130kb이다.
웹 팩이 이렇게 큰 파일을 생성하거나 제가 잘못하고 있는 걸까요?
webpack.config.syslog
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './public/components/main.jsx',
output: {
path: __dirname + "/public",
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.css$/,
loader: "style!css"
}]
}
};
편집
패키지.json:
{
"name": "XChange",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"main": "./bin/www",
"devDependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"react-dom": "~0.14.3",
"react": "~0.14.3",
"webpack": "~1.12.9",
"babel-loader": "~6.2.0",
"babel-core": "~6.2.1",
"babel-preset-react": "~6.1.18",
"babel-preset-es2015": "~6.1.18",
"react-bootstrap": "~0.28.1",
"material-ui": "~0.14.0-rc1",
"history": "~1.13.1",
"react-router": "~1.0.2",
"style-loader": "~0.13.0",
"css-loader": "~0.18.0"
},
"dependencies": {
"express-validator": "~2.18.0",
"mongoose": "~4.2.9",
"kerberos": "~0.0.17",
"bcrypt": "~0.8.5"
}
}
의 , 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.material-ui ★★★★★★★★★★★★★★★★★」react-bootstrap는 웹 웹 팩에 react ★★★★★★★★★★★★★★★★★」react-dom★★★★★★★★★★★★★★★★★★★★★★★★★」require ★★★★★★★★★★★★★★★★★」import패키지는 번들파일의 일부로 번들 됩니다.
그리고 여기 내 추측이 있다. Import를 거예요.react-bootstrap ★★★★★★★★★★★★★★★★★」material-ui컴포넌트(라이브러리 방식 사용):
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
.Button ★★★★★★★★★★★★★★★★★」FlatButton(그리고 그들의 의존관계) 하지만 전체 도서관은 그렇다.
한 가지 은 '만'을 입니다.import ★★★★★★★★★★★★★★★★★」require필요한 것은 컴포넌트 방식이라고 합시다.같은 예를 사용하여 다음 작업을 수행합니다.
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
묶음만 .Button,FlatButton그리고 각각의 의존성.하지만 도서관 전체가 아니야그래서 저는 당신의 모든 라이브러리 Import를 없애고 대신 컴포넌트 방식을 사용하려고 합니다.
많은 컴포넌트를 사용하지 않는 경우 번들파일의 사이즈를 대폭 줄일 수 있습니다.
자세한 설명:
라이브러리를 사용하는 경우 실제로 사용하는 모든 react-bootstrap 및 material-ui 컴포넌트를 Import합니다.
01/2017 EDIT - 그 후 다양한 Webpack 플러그인에 대해 조금 더 알게 되었고, 이를 업데이트하고자 합니다.알고보니 Uglife는JS에는 그다지 주류가 아닌 것처럼 보이지만 번들 크기에 큰 영향을 미칠 수 있는 구성 옵션이 있습니다.이것은, 몇개의 주석을 포함한 현재의 설정입니다(사이트의 docs는 훌륭합니다).
new webpack.optimize.UglifyJsPlugin({
comments: false, // remove comments
compress: {
unused: true,
dead_code: true, // big one--strip code that will never execute
warnings: false, // good for prod apps so users can't peek behind curtain
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true, // strips console statements
sequences: true,
booleans: true,
}
})
는 예전에 알 수 없는 적이 .uglify- excape characters be that that things things things things things things things things things things things things things things things things things things things things things things things 할 수 있는 하십시오.
인 옵션에 는, 「」를 참조해 주세요.webpack는 웹 팩 문서에서 추가 판독을 위한 몇 가지 후속 링크를 지원합니다.
(사이드노트:짐인 것 같은데요.json이 헷갈려...이러한 dev-dependency 중 적어도 몇 가지는 모든 패키지의 의존관계입니다.본 적이 있는 json(예를 들어 리액트 스타터 키트)
실가동 준비를 하고 있는 경우는, 파일 사이즈를 줄이기 위해서 몇개의 순서를 더 실행할 필요가 있습니다.다음은 webpack.config.js의 개요입니다.
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
1) 코드 최소화/업그레이드
2) 중복된 코드를 대체하여 파일 크기를 최소화합니다.
3) 노드 환경 구축에 사용하는 몇 가지를 생략하도록 웹 팩에 지시한다.
마지막으로 소스 맵을 사용하는 경우(아마도 필요한 경우) 적절한 행을 추가해야 합니다.Sentry는 이것에 대해 멋진 블로그 글을 썼다.
내 빌드에서는 devtool을 사용합니다.'source-map'생산용
05/18 갱신 : UglifyJsPlugin 설정을 업데이트하여 최소화를 개선합니다.
나는 생산 코드의 최소화를 위해 아래 구성을 사용합니다.
plugins: [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production'),
}
}),
new ExtractTextPlugin("bundle.css", {allChunks: false}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0
})
],
당신 대본이 어떻게 유선상으로 전송되고 있는지 보셨나요?웹 팩 최적화 후 각각 약 300kb의 매우 간단한 반응 컴포넌트를 사용했습니다.그들은 지퍼를 올린 후 38kb로 내려갔다.여전히 큰 규모입니다. 하지만 이것이 오늘날 미래의 기능을 사용할 때 얻을 수 있는 것입니다.javascript를 포함한 정적 리소스를 제공하기 위해 노드/컴퓨터를 사용하는 경우 압축(https://github.com/expressjs/compression)을 참조하십시오.또한 운영 환경에 대한 노드 베스트 프랙티스 가이드를 참조할 것을 권장합니다.https://expressjs.com/en/advanced/best-practice-performance.html 노드를 통해 파일을 제공하지 않는 경우 apache(또는 다른 웹 서버)에는 텍스트 기반 파일을 압축하는 옵션이 있습니다.
source-map-explector 유틸리티를 사용하면 bundle.js 파일에 정확히 무엇이 있는지 알 수 있습니다.번들 js에 불필요한 것이 있는지 확인하는 데 도움이 됩니다.npm부터 source-map-display를 설치하여 다음과 같이 사용할 수 있습니다.
source-map-explorer yourBundle.js
이 외에도 @kimmiju에서 설명한 바와 같이 서버가 압축을 사용하고 있는지 확인합니다.
또한 비동기적으로 루트를 로드(webpack에서의 lazy loading)하여 bundlejs 파일 전체가 한 번에 전송되지 않도록 할 수도 있습니다.사용자가 이러한 루트로 이동할 때 파일 전체가 청크로 전송됩니다.
언급URL : https://stackoverflow.com/questions/34239731/how-to-minimize-the-size-of-webpacks-bundle
'programing' 카테고리의 다른 글
| 사용자가 입력을 일시 중지할 때까지 지연되는 키 켜기 이벤트를 트리거하려면 어떻게 해야 합니까? (0) | 2023.03.22 |
|---|---|
| Angular 2: HTTP 응답 본문에 액세스하는 방법 (0) | 2023.03.22 |
| react-dom을 사용한 jajest 단위 테스트에서 act()를 사용하는 경우 (0) | 2023.03.22 |
| 형식 문자 Angular 4에서 문자열을 부울로 변환하는 방법 (0) | 2023.03.22 |
| Apache 2.4에서 mod_rewrite를 활성화하는 방법 (0) | 2023.03.22 |