집 > 기사 > 웹 프론트엔드 > 효율성을 높이기 위해 vue-cli 프로젝트의 첫 번째 화면 로딩 시간을 줄이는 방법

효율성을 높이기 위해 vue-cli 프로젝트의 첫 번째 화면 로딩 시간을 줄이는 방법

不言원래의: 2018-08-15 14:03:101396검색

이 글에서는 vue-cli 프로젝트의 효율성을 높이기 위해 첫 화면 로딩 시간을 단축하는 방법에 대해 설명합니다. 코드가 매우 자세하게 설명되어 있습니다.

첫 번째 화면이 너무 느리게 로드되기 때문입니다.

대형 파일 포지셔닝
webpack 비주얼 플러그인 Webpack Bundle Analyser를 사용하여 프로젝트 js 파일의 크기를 확인한 다음 의도적으로 지나치게 큰 js 파일을 해결할 수 있습니다.
Installation

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

webpack에서 다음과 같이 설정하면 기본적으로 npm run dev가 포트 8888에 표시됩니다.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

JS 파일은 요청 시 로드됩니다
이 설정을 하지 않으면 프로젝트 첫 화면이 로드될 때 전체 웹사이트의 모든 JS 파일이 로드되므로 JS 파일을 분리하여 JS를 로드하는 것이 좋습니다. 페이지 최적화 방법을 클릭하면 페이지가 표시됩니다.
여기서 사용되는 것은 Vue 구성요소의 지연 로딩입니다. router.js에서는 구성요소를 도입하기 위해 가져오기 메소드를 사용하지 말고 require.ensure를 사용하십시오.

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')))

cdn
을 패키징으로 사용할 경우 vue, vuex, vue-router, axios 등을 국내 bootcdn으로 교체하고 루트디렉토리의 index.html에 직접 도입하세요.

웹팩 설정에서 외부 항목을 추가하고 패키징할 필요가 없는 라이브러리는 무시하세요.

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

cdn을 사용하여 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>

JS 파일은 본문 맨 마지막에 넣어주세요
기본적으로 빌드된 index.html에는 헤더에 js가 도입되어 있습니다.
html-webpack-plugin 플러그인을 사용하여 body에 대한 inject 값을 변경하세요. 본문 끝에 js 소개를 넣을 수 있습니다.

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({

  inject: 'body',

})

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

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

효율성을 높이기 위해 vue-cli 프로젝트의 첫 번째 화면 로딩 시간을 줄이는 방법

관련 기사