Vue 포장 부피 최적화 방안 소결
선언:
회사 프로젝트 가 완 성 된 후에 포장 이 완 성 된 후에 1.18 메가바이트 가 되 었 다.사실은 괜 찮 은 것 같 지만 최적화 할 수 있 는 부분 이 있다.우리 에 게 더욱 정교 하 게(있 는 지 없 는 지*수의)정신 을 가 진 다음 에 최적화 시 키 면 프로젝트 에 먼저 설치 할 수 있다
webpack-bundle-analyzer각 파일 의 크기 를 볼 수 있다.
npm install webpack-bundle-analyzer -save-dev
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
분석 하 다.
최적화 하기 전에 vendor~app.xxxx.js 는 1.18MB 가 있 습 니 다.각 bundle 크기 를 보고 맞 춤 형 으로 최적화 할 수 있 습 니 다.
최적화 하 다.
CDN 로드
vue,vue-router,vuex,axios 등 은 생산 환경 에서 CDN 으로 불 러 올 수 있 습 니 다.
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
const cdn = {
css: [],
js: [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
]
}
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
};
}
},
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.png" rel="external nofollow" >
<!-- CDN CSS -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<% } %>
<!-- CDN JS -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
<% } %>
<title> </title>
</head>
<body>
<noscript>
<strong></strong>
</noscript>
<div id="app"></div>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>포장 응용 프로그램 을 사용 할 때 자 바스 크 립 트 패 키 지 는 매우 커 져 서 페이지 로 딩 에 영향 을 줍 니 다.만약 에 우리 가 경로 에 접근 할 때 이 모듈 을 불 러 오 면 매우 효율 적 이 고 정적 도입 방식 을 동적 도입 방식 으로 바 꿉 니 다.
import ComponentA from '../page/components/ComponentA';
routeList = [
{
path: '/comA',
component: ComponentA
},
]
//
routeList = [
{
path: '/comA',
component: () => import('../page/components/ComponentA')
},
]vue cli 3 에서 우 리 는 수 동 으로 제거 해 야 합 니 다.
바로 첫 화면 을 불 러 올 때 경로 파일 을 한꺼번에 다운로드 합 니 다.이 로 인해 첫 화면 에 요청 내용 이 많아 지고 첫 화면 로 딩 이 느 려 집 니 다.다음 과 같이 수정 합 니 다.
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// prefetch
config.plugins.delete('prefetch')
// preload
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
};
}
},
}element-ui/lib 이 가방 을 보면 가방 크기 의 3 분 의 2,554 k 를 차지 하고 가방 도 700 여 k 를 차지 하기 때문에 element-ui 를 필요 에 따라 불 러 오 면 부 피 를 줄 일 수 있 습 니 다.필요 에 따라 불 러 오 는 것 은 말 하지 않 겠 습 니 다.모두~:stuckout_tongue_closed_eyes:
하지만 babel.config.js 파일 에 추가 해 야 합 니 다(vue cli 3 에 babel-plugin-component 를 설치 해 야 합 니 다)
module.exports = {
presets: ['@vue/app'],
// ~
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
};compression-webpack-plugin 설치
nmp i compression-webpack-plugin -D
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// prefetch
config.plugins.delete('prefetch')
// preload
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
plugins: [
//gzip
new CompressionPlugin({
test: /\.jsO¨E92E.html|\.htmlO¨E92E.html|.\css/, //
threshold: 10240, // 10k
deleteOriginalAssets: false //
})
],
performance: {
hints: false
}
};
}
},
}하지만 서버 에서 설정 해 야 합 니 다.
scss 파일 도입
우 리 는 보통 scss 파일 을 추출 하고 공유 스타일,테마 등 을 사용 한 다음 에 필요 한 모든 구성 요소 에 도입 하 는 것 이 번 거 로 워 집 니 다.우 리 는 scss-loader 를 통 해 예비 처 리 를 할 수 있 습 니 다.
예 를 들 어 resetTable.scss 파일 이 있 습 니 다.vue.config.js 에 도입 할 수 있 습 니 다.
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
}
return args
})
// prefetch
config.plugins.delete('prefetch')
// preload
config.plugins.delete('preload');
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
externals: externals,
plugins: [
//gzip
new CompressionPlugin({
test: /\.jsO¨E92E.html|\.htmlO¨E92E.html|.\css/, //
threshold: 10240, // 10k
deleteOriginalAssets: false //
})
],
performance: {
hints: false
}
};
}
},
// scss
css: {
loaderOptions: {
sass: {
// assets/commcss
data: '@import "@assets/commcss/resetTable.scss";'
}
},
},
}요약:
이상 은 바로 현재 내 가 프로젝트 에서 최적화 한 점 이지 만 분명 다른 최적화 부분 이 있어 서로 토론 할 수 있다.
Vue 포장 부피 최적화 방안 의 소결 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 포장 부피 최적화 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
