vue-cli 첫 화면 로딩 시간 최적화

이번에는 vue-cli의 첫 화면 로딩 시간을 최적화하는 방법을 알려드리겠습니다. vue-cli의 첫 화면 로딩 시간을 최적화하기 위한 주의 사항은 무엇인가요?

대용량 파일 찾기

웹팩 시각화 플러그인 Webpack Bundle Analyser를 사용하여 프로젝트 js 파일의 크기를 확인한 다음 의도적으로 지나치게 큰 js 파일을 해결할 수 있습니다. Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。

安装

npm install --save-dev webpack-bundle-analyzer

在webpack中设置如下，然后npm run dev

Installation

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
 plugins: [
  new BundleAnalyzerPlugin()
 ]
}

은 webpack에서 다음과 같이 설정되어 있으며, 기본적으로 npm run dev가 포트 8888에 표시됩니다.

import index from '@/components/index'
const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
//不写第二个参数，就直接打包在`/JS` 目录下。
const index = r => require.ensure( [], () => r (require('@/components/index')))

JS 파일은 요청 시 로드됩니다

이 설정을 하지 않으면 프로젝트 첫 화면이 로드될 때 전체 웹사이트의 모든 JS 파일이 로드되므로 JS 파일을 분리하여 페이지를 로드할 때 그것을 클릭하면 JS는 좋은 최적화 방법입니다.

여기서 사용되는 것은 Vue 구성 요소의 지연 로딩입니다. router.js에서는 구성요소를 도입하기 위해 가져오기 메소드를 사용하지 말고 require.ensure를 사용하십시오.

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

패키징에 cdn

을 사용하는 경우 vue, vuex, vue-router, axios 등을 국내 bootcdn으로 교체하고 루트 디렉터리의 index.html에 직접 도입하세요. 웹팩 설정에서 외부 항목을 추가하고 패키징할 필요가 없는 라이브러리는 무시하세요.

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

cdn을 사용하여 index.html로 가져옵니다.

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})

JS 파일은 본문 맨 마지막에 넣어주세요

기본적으로 빌드된 index.html에는 헤더에 js가 도입되어 있습니다.

html-webpack-plugin 플러그인을 사용하여 inject to body 값을 변경하세요. 본문 끝에 js 소개를 넣을 수 있습니다.

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

코드 압축 및 콘솔 제거

UglifyJsPlugin 플러그인을 사용하여 코드를 압축하고 콘솔 제거.

rrreee현재는 이러한 최적화 방법만 발견되었습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:
실제 프로젝트에서 Vue의 슬롯/범위 지정 슬롯 사용하기

🎜🎜🎜🎜Angular2에서 Dom을 사용할 때 주의사항은 무엇입니까🎜🎜🎜

위 내용은 vue-cli 첫 화면 로딩 시간 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!